Singleton-Controller in AngularJS

Question

Ich habe eine Richtlinie: in Vorlage:

<territorial-selector></territorial-selector> 

in js:

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

Wie Sie die Richtlinie verwenden "TerritorialSelectorController"

In einem anderen sehen können Ort Ich habe eine Schaltfläche, die Methode LoadTerritories() von TerritorialSelectorController ausführen soll. Ich habe diese Schaltfläche:

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

Das Problem, das in diesem Fall TerritorialSelectorController zweimal erzeugt. Hier ist der Code von TerritorialSelectorController:

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

Und ich brauche nur ein Objekt der Steuerung.

Answer 1

Wenn Sie möchten, dass die Funktionalität als Singleton funktioniert, benötigen Sie sie in einem Dienst, auf den Ihre Controller dann zugreifen. Controller sind keine Singletons; Sie können viele, viele Instanzen desselben Basiscontrollers in Ihrem Code verwenden.

Wenn Sie stattdessen einen Service erstellen, können die gemeinsamen Daten/Funktionen, die jeder Controller gemeinsam nutzen muss, über diesen Service platziert und abgerufen werden.

Here's a Plunk demo zeigt zwei Controller, die Daten über einen Dienst gemeinsam nutzen. Es sind nicht zwei Controller des gleichen Typs, aber es zeigt Ihnen die Grundlagen der Funktionsweise von Services.

Hier ist auch ein Code aus der 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); 
    }); 
}); 

Service:

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; 
});