Question

我有这个灯箱不时弹出。有3种方法可以关闭它。关闭按钮，单击其外部的叠加层和另一种方式。对于近距离行动，我决定做一个看起来像这样的工厂：

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

我希望关闭灯箱的一个HTML元素是这样的：

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

我面临的问题是：我应该注入工厂的指令（看它操纵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>

对战：

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>

最后，我是Angular的新手，所以如果你证明你的回答是正确的，我将不胜感激，并且请告诉我，如果我正在以正确的方式处理这一切，如果有一些方面我可以改进或其他方法将是更好。

Answer 1

不要操纵控制器或服务中的DOM（服务，厂）。你必须在指令
您可以直接获取元素并在指令
使用角度动画而不是依赖于jQuery

最重要的是，您所面临的所有问题和上述问题都在这个非常棒的视频中解决，该视频解释了创建隐藏动画内容的指令。 https://egghead.io/lessons/angularjs-animating-the-angular-way

干杯!!!!

AngularJS工厂安置

1 个答案: