2015-12-15 3 views
0

В моем приложении я использую пользовательскую директиву с прослушивателя событий Изменить размер окна:Приемники событий выстрелил несколько раз из той же директиве

link: function(scope, elem, attrs) { 
    angular.element($window).bind('resize', function() { 
     // viewId is a unique reference to the view in which the directive lives 
     console.log(scope.viewId); 
    }); 
} 

Эта директива установлена ​​1 или несколько раз в каждом из моих взглядов.

Что вызывает у меня головоломка, почему функция выполняется не только для активного вида, но и для неактивных. Это происходит, когда я получаю доступ к нескольким представлениям.

Что еще больше заставляет меня задуматься, почему функция вызывается несколько раз из того же представления, после того как я посетил один и тот же взгляд несколько раз.

Мне кажется, что старая область действия не уничтожена, но сохраняется в живых и создается новая область поверх старой.

Есть ли что-нибудь, что я могу сделать, чтобы этого не случилось?


Ниже фрагмент кода рабочего раствора на основе ответа, Ренан Lopes Ferreira (я использую LoDash _.debounce предотвратить функцию называют слишком часто):

windowResize = _.debounce(function() { 
    // My logic 
    $scope.$apply(); 
}, 150); 

// Attach debounced function to the window.resize event listener 
angular.element($window).on('resize', windowResize); 

// Remove the function when the directive is destroyed 
$scope.$on('$destroy', function() { 
    angular.element($window).off('resize', windowResize); 
}); 

ответ

1

Вам нужно удалить слушателя, когда ваша директива будет уничтожена. Кое-что вроде:

angular.element($window).on('resize', resize); 

scope.$on('$destroy', function() { 
    angular.element($window).off('resize', resize); 
}); 

function resize(){ 
    ... 
} 
+0

Это работает как шарм, большое спасибо за это! – Hendrik

0

В директивной ссылке функция называется единовременно для каждой директивы с таким же именем, которое найдено угловым.

Итак, если у вас есть дважды ваша директива в вашем представлении, она будет выполнять функцию связи два раза.

Если вы хотите запускать свою функцию только один раз, просто делайте свои вещи в функции «компиляции».

Проверить этот учебник, он велик: http://www.sitepoint.com/practical-guide-angularjs-directives/

+0

Спасибо за полезный ввод. В моем случае использования было нормально, чтобы функция вызывалась несколько раз для каждой директивы, я просто не хотел, чтобы их вызывали для уничтоженных директив. – Hendrik