regolatore Singleton in AngularJs

Question

Ho una direttiva: nel template:

<territorial-selector></territorial-selector> 

in js:

app.directive('territorialSelector', function() { 
    return { 
     restrict: 'E' 
     ,templateUrl: 'partials/territorial-selector.html' 
     ,controller: 'TerritorialSelectorController' 
    }; 
}; 

Come si può vedere l'uso direttiva "TerritorialSelectorController"

In un altro posto ho un pulsante che dovrebbe eseguire il metodo loadTerritories() da TerritorialSelectorController. Ho creato questo tasto:

<button ng-controller="TerritorialSelectorController" ng-click="loadTerritories()">BUTTON</button> 

Il problema che in questo caso TerritorialSelectorController crea due volte. Ecco il codice di TerritorialSelectorController:

app.controller('TerritorialSelectorController', ['$scope', function($scope) { 
    alert('AAAAA'); // I have alert two times 
}]); 

E ho bisogno di un solo oggetto del controller.

Answer 1

Se si desidera che la funzionalità funzioni come un singleton, è necessario che si trovi all'interno di un servizio a cui i controllori accedono. I controllori non sono singleton; puoi avere molte, molte istanze dello stesso controller di base nel tuo codice.

Se si crea invece un servizio, i dati/funzionalità comuni che ogni controller deve condividere possono essere inseriti e consultati tramite tale servizio.

Here's a Plunk demo che mostra due controller che condividono i dati tramite un servizio. Non sono due controller dello stesso tipo, ma ti mostreranno le basi su come funzionano i servizi.

Ecco un po 'di codice dalla demo. Controller:

app.controller('SunListCtrl', function($scope, List, $log) { 
    $scope.items = List.getList(); 

    $scope.$on('updatedList', function() { 
    $scope.items = List.getList(); 
    $log.info('List has been updated. Size = ' + $scope.items.length); 
    $log.info('\tNow set to: ' + $scope.items); 
    }); 
}); 

Servizio:

app.service('List', function($rootScope, $log) { 
    service = {}; // the service object we'll return 

    var dateValue = 'date'; 
    var geoValue = 'geo'; 
    var theList = []; 

    service.setGeo = function(data) { 
    geoValue = data; 
    updateList(); 
    } 

    service.setDate = function(data) { 
    dateValue = data; 
    updateList(); 
    } 

    function updateList() { 
    theList = [dateValue, geoValue]; 
    $rootScope.$broadcast('updatedList'); // broadcasts the update to listeners 
    } 

    service.getList = function() { 
    return theList; 
    } 

    return service; 
});