Представьте ситуацию в AngularJS, где вы хотите создать директиву, которая должна отвечать глобальному событию. В этом случае, скажем, событие изменения размера окна.
Каков наилучший подход для этого? Как я вижу это, у нас есть два варианта: 1. Пусть каждая директива связывается с событием и делает это волшебство для текущего элемента 2. Создайте глобальный прослушиватель событий, который выполняет селектор DOM, чтобы получить каждый элемент, на который должна применяться логика.
Вариант 1 имеет то преимущество, что у вас уже есть доступ к элементу, на котором вы хотите выполнить некоторые операции. Но... варианты 2 имеют то преимущество, что вам не нужно связывать несколько раз (для каждой директивы) на одном и том же мероприятии, которое может быть выгодным для производительности.
Обозначьте обе опции:
Вариант 1:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(el){
// In here we have our operations on the element
}
return {
link: function(scope, element){
// Bind to the window resize event for each directive instance.
angular.element(window).on('resize', function(){
doSomethingFancy(element);
});
}
};
});
Вариант 2:
angular.module('app').directive('myDirective', function(){
function doSomethingFancy(){
var elements = document.querySelectorAll('[my-directive]');
angular.forEach(elements, function(el){
// In here we have our operations on the element
});
}
return {
link: function(scope, element){
// Maybe we have to do something in here, maybe not.
}
};
// Bind to the window resize event only once.
angular.element(window).on('resize', doSomethingFancy);
});
Оба подхода работают нормально, но я считаю, что вариант второй не действительно "Angular -ish".
Любые идеи?
