kontroler Singleton w angularjs

Question

Mam dyrektywy: w szablonie:

<territorial-selector></territorial-selector> 

w JS:

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

Jak widać stosowanie dyrektywa "TerritorialSelectorController"

w innej miejsce Mam przycisk, który powinien wykonać metodę loadTerritories() z TerritorialSelectorController. Stworzyłem ten przycisk:

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

Problem, że w tym przypadku TerritorialSelectorController tworzy dwa razy. Tutaj jest kod TerritorialSelectorController:

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

Potrzebuję tylko jednego obiektu kontrolera.

Answer 1

Jeśli chcesz, aby ta funkcjonalność działała jak singleton, będziesz potrzebować jej wewnątrz usługi, do której następnie będą mieć dostęp Twoje kontrolery. Kontrolery nie są pojedynczymi; możesz mieć wiele, wiele instancji tego samego podstawowego kontrolera w swoim kodzie.

Jeśli zamiast tego tworzysz usługę, wówczas wspólne dane/funkcje, którymi każdy kontroler musi się współdzielić, można umieścić i uzyskać do nich dostęp za pośrednictwem tej usługi.

Here's a Plunk demo, która pokazuje dwóch kontrolerów współdzielących dane za pośrednictwem usługi. To nie są dwa kontrolery tego samego typu, ale pokaże ci podstawy działania usług.

Oto także kod z wersji demonstracyjnej. Kontroler:

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

Usługa:

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