Angularjs: функция инициализации контроллера позволяет избежать вызова инициализации

У меня есть следующий код контроллера:

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

Проблема заключается в том, что при использовании директивы ng-click для filterByProvince('test') кажется, что также вызывается функция инициализации. Я хочу избежать такого поведения.

Любая помощь?


person Kleber S.    schedule 13.07.2014    source источник
comment
Кажется, у вас есть собственная система для загрузки содержимого страниц... Есть ли причина, по которой вы не используете ui-router или стандартный поставщик маршрутов в Angular? Кроме того, ваш $http.get должен быть помещен во внешнюю фабрику/службу и вызываться из вашего контроллера.   -  person Christian Bonato    schedule 13.07.2014
comment
Похоже, что ваша функция init будет вызываться при первой инициализации контроллера, то есть при первой ссылке на нее в ng-controller или при загрузке маршрута, который ее использует. Я не вижу другого места, где он мог бы быть вызван, и уж точно не при вызове loadPage, если только содержимое, загруженное loadPage, не содержит директиву ng-controller. Не могли бы вы дать более подробную информацию о порядке, в котором вы видите, что происходит, и где и как вы используете этот контроллер?   -  person Joe White    schedule 13.07.2014
comment
Я не могу воссоздать вашу проблему: plnkr.co/edit/v7ooXMcLICD9l8NNEqOS Нажатие кнопки не -вызвать инициализацию()   -  person Arthur Frankel    schedule 13.07.2014
comment
@KleberS: Дайте угадаю: вы используете ngClick на <a>.   -  person gkalpak    schedule 13.07.2014
comment
@ExpertSystem да, знаю. Есть ли какие-либо проблемы с этим?   -  person Kleber S.    schedule 14.07.2014
comment
@KleberS.: Дай угадаю еще раз: твой <a> имеет href из #.   -  person gkalpak    schedule 14.07.2014
comment
@ExpertSystem, ты снова прав. Что я делаю неправильно?   -  person Kleber S.    schedule 14.07.2014


Ответы (1)


В Angular, если вы хотите, чтобы элемент <a> отображался как элемент <a>, но использовался по-другому (например, как кнопка (путем присоединения какой-либо директивы ngClick)), вы должны использовать пустой href:

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

Проблема с использованием href="#" заключается в том, что это либо:

  1. Распознается ngRoute (если он используется) как «ссылка» на домашний маршрут ('/'), поэтому, даже если вы находитесь на этом маршруте, он перезагружается, вызывая аннулирование эффектов обратного вызова ngClick или

  2. Распознается браузером как ссылка с тегом привязки на ту же страницу, поэтому щелчок по ней приводит к перезагрузке страницы (снова аннулируя любой эффект обратного вызова ngClick).


Я не уверен, как ui-router справляется с этим, но я не большой поклонник ui-router — может быть, кто-то с большим опытом может дать отзыв.

person gkalpak    schedule 16.07.2014
comment
Спасибо за объяснение :) - person Kleber S.; 16.07.2014