javascript - Singleton controller in AngularJs - Stack Overflow

admin管理员组

文章数量:1353497

I have a directive: in template:

<territorial-selector></territorial-selector>

in js:

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

As you can see the directive use "TerritorialSelectorController"

In another one place I have a button that should execute method loadTerritories() from TerritorialSelectorController. I created this button:

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

The problem that in this case TerritorialSelectorController creates two times. Here is the code of TerritorialSelectorController:

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

And I need only one object of the controller.

I have a directive: in template:

<territorial-selector></territorial-selector>

in js:

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

As you can see the directive use "TerritorialSelectorController"

In another one place I have a button that should execute method loadTerritories() from TerritorialSelectorController. I created this button:

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

The problem that in this case TerritorialSelectorController creates two times. Here is the code of TerritorialSelectorController:

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

And I need only one object of the controller.

• javascript
• angularjs

Share Improve this question Follow edited May 7, 2015 at 19:50 Jerald asked May 7, 2015 at 19:39 JeraldJerald 4,0581111 gold badges5050 silver badges8484 bronze badges 5

• 2 I guess you should create Angular service instead - docs.angularjs/guide/services – tiblu Commented May 7, 2015 at 19:42
• 1st place what do you mean by Singleton controller? – Pankaj Parkar Commented May 7, 2015 at 19:42
• I mean that I don't want two objects of TerritorialSelectorController. – Jerald Commented May 7, 2015 at 19:46
• service/factory/provider are singleton in angular..do go for it as its already suggested by @tiblu – Pankaj Parkar Commented May 7, 2015 at 19:53
• If you ever hear yourself say the word singleton in the context of Angular, think services not controllers. – David says Reinstate Monica Commented May 7, 2015 at 19:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

If you want the functionality to work as a singleton, then you will need it to be inside a service that your controllers then access. Controllers are not singletons; you can have many, many instances of the same basic controller in your code.

If you instead create a service, then the mon data/functionality that each controller must share can be placed, and accessed, through that service.

Here's a Plunk demo that shows two controllers sharing data through a service. It's not two controllers of the same type, but it will show you the basics of how services work.

Here's some code from the demo, as well. 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;
});

本文标签： javascriptSingleton controller in AngularJsStack Overflow