Установкой на заводе AngularJS

Question

У меня есть этот лайтбокс, который появляется время от времени. Есть три способа закрыть его. Нажмите кнопку «Закрыть», щелкнув надпись, находящуюся за ее пределами, и другим способом. Для близкого действия я решил сделать фабрику, которая выглядит следующим образом:

app.factory('close',function(){ 
    return { 
     close: function(){ 
       $('.mySelector').fadeOut(); 
      } 
    } 
}); 

Один из моих HTML-элементов, которые я хочу, чтобы закрыть лайтбокс будет что-то вроде этого:

<a href="" ng-click="close">close lightbox</a> 

вопрос я столкнулся с этим: должен ли i ввести завод в директиве (видя, как он манипулирует DOM) или в контроллере? - Контроллер существует в любом случае, так как мне это нужно для других вещей. Преимущество первого заключается в том, что у моей разметки будет только контроллер, прикрепленный к верхнему элементу лайтбокса, и с ним можно сделать. Директива, с другой стороны, должна быть привязана к каждому элементу индивидуально + есть сам код директивы (мало что может быть).

Это приводит к:

added code for directive + 
<top-element-of-lightbox ng-controller="myController"> <!-- controller does NOT have factory injected --> 
    <a href="" ng-click="close" **my-directive**>close lightbox1</a> <!--directive attached to element --> 
    <a href="" ng-click="close" **my-directive**>close lightbox2</a> <!--directive attached to element --> 
    ... 
</top-element-of-lightbox> 

Versus:

0(zero) directive code + 
<top-element-of-lightbox ng-controller="myController"> <!-- controller HAS factory injected --> 
    <a href="" ng-click="close">close lightbox1</a> <!-- no directive attachment --> 
    <a href="" ng-click="close">close lightbox2</a> <!-- no directive attachment --> 
    ... 
</top-element-of-lightbox> 

Наконец, я новичок в Угловое, так что я был бы признателен, если вы обоснуйте свой ответ, а также, пожалуйста, скажите мне, если я буду о все это правильно, и если есть области, где я мог бы улучшить, или другой подход был бы лучше.

Answer 1

1. Не манипулируйте DOM контроллером или услугами (сервис, завод). Вы должны сделать это в директиве
2. Вместо того, чтобы использовать селектор JQuery вы можете непосредственно разжиться элемента и манипулировать внутри директивы
3. Используя угловые анимации вместо того, чтобы полагаться на JQuery

Самое главное все ваши запросы и выше проблема, с которой вы сталкиваетесь, решена в этом потрясающем видео, которое просто объясняет создание директивы для скрытия материала с анимацией. https://egghead.io/lessons/angularjs-animating-the-angular-way

Cheers !!!!