Angular Controller Instantiated Multiple Times

Question

I have an Angular controller loaded in a view:

<div ng-controller="MyCtrl">
  <p ng-bind-html="content"></p>
</div>

This partial is loaded into different views, and as a result the controller gets instantiated multiple times. In the controller, I'm detecting for location change:

angular.module('MyApp')
  .controller('HintCtrl', function ($scope, $rootScope) {
    $rootScope.$on('$locationChangeSuccess', function () {
       alert("HI");
    });
});

Each time I change my location, this fires once for each time the controller was ever loaded. How can I have this run only once?

Maybe you should handle the event in a parent controller. This is how angular works and it's coherent that each controller sees the event. — luxcem
– luxcem, Commented Dec 11, 2013 at 15:12

Caio Cunha · Accepted Answer · 2013-12-11 15:14:17Z

6

The point is that Controllers are not singleton. You gonna have one new instance for each of the elements.

What you can do, is to use this on a service, and this one is singleton.

You could do something like this:

angular.module('MyApp')
  .controller('HintCtrl', function ($scope, Alerter) {
    Alerter.doSomething();
  })

  .service('Alerter', function($rootScope) {
    $rootScope.$on('$locationChangeSuccess', function () {
      alert("HI");
    });

    this.doSomething = function() {
      ...
    };
  });

answered Dec 11, 2013 at 15:14

Caio Cunha

23.4k6 gold badges81 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Controller Instantiated Multiple Times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related