सिंगलटन नियंत्रक

Question

मैं एक निर्देश है

<territorial-selector></territorial-selector> 

js में

:

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

आप के निर्देश उपयोग "TerritorialSelectorController"

एक और एक में देख सकते हैं जगह मेरे पास एक बटन है जो TerritorialSelectorController से विधि loadTerritories() निष्पादित करना चाहिए। मैं इस बटन को बनाया:

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

समस्या इस मामले में TerritorialSelectorController दो बार बन जाता है। यहां TerritorialSelectorController का कोड है:

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

और मुझे नियंत्रक की केवल एक वस्तु की आवश्यकता है।

Answer 1

यदि आप कार्यक्षमता को सिंगलटन के रूप में काम करना चाहते हैं, तो आपको इसे उस सेवा के अंदर रहने की आवश्यकता होगी जब आपके नियंत्रक तब पहुंच सकें। नियंत्रक सिंगलेट नहीं हैं; आपके कोड में एक ही मूल नियंत्रक के कई, कई उदाहरण हो सकते हैं।

यदि आप इसके बजाय सेवा बनाते हैं, तो उस सेवा के माध्यम से प्रत्येक नियंत्रक को साझा करने वाले सामान्य डेटा/कार्यक्षमता को रखा जा सकता है और एक्सेस किया जा सकता है।

Here's a Plunk demo जो सेवा के माध्यम से डेटा साझा करने वाले दो नियंत्रकों को दिखाता है। यह एक ही प्रकार के दो नियंत्रक नहीं है, लेकिन यह आपको मूलभूत बातें दिखाएगा कि सेवाएं कैसे काम करती हैं।

यहां डेमो से कुछ कोड भी है। नियंत्रक:

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

सेवा:

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