Angularjs: controller init function avoid init to be called

Question

I have the following controller code:

applicationControllers.controller('PostsController', ['$scope', '$http', function 

($scope, $http) {
  var page = 1;

  $scope.init = function() {
    this.loadPage(page);
  }

  $scope.nextPage = function() {
    page++;
    this.loadPage(page);
  }

  $scope.previousPage = function() {
    page--;
    if (page <= 0) { page = 1 }
    this.loadPage(page);
  }

  $scope.filterByProvince = function(provinceName) {
    console.log(provinceName);
  }

  $scope.loadPage = function(page) {
    $http.get('/posts.json?page=' + page).success(function(data) {
      $scope.posts = data;
    });
  }

  $scope.init();
}]);

The problem is when using a ng-click directive to filterByProvince('test'), it seems the init function are also called. I want to avoid this behaviour.

Any help?

You seem to have a custom system for loading pages content... Is there a reason for you not to use ui-router, or the standard route provider in Angular? Also, your $http.get should be placed in a outside factory/service and called from within your controller. — Christian Bonato
– Christian Bonato, Commented Jul 13, 2014 at 0:45
It looks like your init function will get called the first time the controller is initialized, i.e., the first time you reference it in ng-controller or load a route that uses it. I don't see anyplace else that it would get called, and certainly not when you call loadPage, unless the content loaded by loadPage contains an ng-controller directive. Could you give more details about the order you're seeing things happen, and where and how you use this controller? — Joe White
– Joe White, Commented Jul 13, 2014 at 1:02
I can't recreate your issue: plnkr.co/edit/v7ooXMcLICD9l8NNEqOS The button press doesn't re-call init() — Arthur Frankel
– Arthur Frankel, Commented Jul 13, 2014 at 1:06
@KleberS: Let me guess: you are using ngClick on an <a>. — gkalpak
– gkalpak, Commented Jul 13, 2014 at 6:40

gkalpak · Accepted Answer · 2014-07-16 10:12:31Z

1

In Angular, when you want to have an <a> element display like an <a> element, but used differently (e.g. as a button (by attaching some ngClick directive)), you should use an empty href:

<a href="" ng-click="doSomething()">Do something</a>

The problem with using href="#" is that it is eihter:

Recognized by ngRoute (if it is used) as a "link" to the home route ('/'), so even if you are in that route it gets reloaded causing the effects of the ngClick callback to be voided or
Recognized by the browser as link with an anchor tag to the same page, so clicking it causes the page to reload (again voiding any effect of the ngClick callback).

_{I am not sure how ui-router handles this, but I am not a big fan of ui-router - maybe someone with more experience can give some feedback.}

answered Jul 16, 2014 at 10:12

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

Collectives™ on Stack Overflow

Angularjs: controller init function avoid init to be called

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