AngularJS工厂布局 [英] AngularJS factory placement

问题描述

我有这个灯箱，从时间弹出时间。有3种方法来关闭它。关闭按钮，点击这外面和另一种方式覆盖。对于亲密的动作，我决定做一个工厂，看起来像这样：

  app.factory（关闭，函数（）{
   返回{
      关闭：函数（）{
                $（'。mySelector'）淡出（）。
             }
   }
}）;
 

一个，我想有密切的灯箱会是这样的我的HTML元素：

 ＆LT; A HREF =NG点击=关闭＆GT;关闭收藏＆LT; / A＆GT;
 

我面对的问题是：我应该注射工厂指令（看到它操纵DOM）或控制器？ - 控制器有两种方式，因为我需要它的其他的东西。第一的优点是，我的标记只会有一个控制器连接到收藏夹的顶部元件和用它做。另一方面指令将不得不被附加到每个元素逐个+有指令code本身（它小而定）。

这语句：

 添加code的指令+
＆LT;顶级元素的-NG灯箱控制器=myController的＆GT; ＆LT;！ - 控制器没有工厂注入 - ＆GT;
   ＆LT; A HREF =NG点击=关闭**我-指令**指接近lightbox1＆LT; / A＆GT; ＆LT;！ - 指令附着元素 - ＆GT;
   ＆LT; A HREF =NG点击=关闭**我-指令**指接近lightbox2＆LT; / A＆GT; ＆LT;！ - 指令附着元素 - ＆GT;
   ...
/顶元素的-收藏＆GT;其中p
 

对战：

  0（零）指令code +
＆LT;顶级元素的-NG灯箱控制器=myController的＆GT; ＆LT;！ - 控制器有工厂注入 - ＆GT;
   ＆LT; A HREF =NG点击=关闭＆GT;关闭lightbox1＆LT; / A＆GT; ＆LT;！ - 无指令附件 - ＆GT;
   ＆LT; A HREF =NG点击=关闭＆GT;关闭lightbox2＆LT; / A＆GT; ＆LT;！ - 无指令附件 - ＆GT;
   ...
/顶元素的-收藏＆GT;其中p
 

最后，我是新来的角，所以我会AP preciate如果你证明你的回应，也请告诉我，如果我要对这个整个事情的正确方法，如果有两个领域，我可以改进或另一种方法会更好。

解决方案

1. 请不要操作您的DOM在控制器或服务（服务，
   厂）。你必须这样做，在指令


2. 如果不使用jQuery选择，你可以直接得到元素的保留，操作它的内部指令


3. 采用了棱角分明的动画，而不是依赖于jQuery的

更重要的是所有的疑问和你面对上述问题，这真棒视频刚​​刚介绍创建一个指令隐藏的东西与动画就解决了。
https://egghead.io/lessons/angularjs-animating-the-angular-way

干杯！！！！

i have this lightbox that pops up from time to time. There are 3 ways to close it. Close button, clicking the overlay that's outside it and another way. For the close action i decided to do a factory that looks like this:

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

One of my HTML elements that i want to have close the lightbox would be something like this:

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

The question i am faced with is this: Should i inject the factory in a directive (seeing as it manipulates the DOM) or in a controller? - the controller is there either way since i need it for other stuff. The advantage of the first is that my markup would only have a controller attached to the top element of the lightbox and be done with it. The directive on the other hand will have to be attached to each element individually + there's the directive code itself (little of it may be).

This translates to:

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>

Lastly, i am new to Angular so i would appreciate if you justify your response and also please tell me if i am going about this whole thing the right way and if there are areas where i could improve or an other approach would be better.

解决方案

1. Do not manipulate your DOM in controller or services(service, factory). You must do that in directive
2. Instead of using jQuery selector you can directly get hold of element and manipulate it inside directive
3. Using angular animations instead of relying on jQuery

Most importantly all your queries and above issue you face is solved in this awesome video which just explains creating a directive to hide stuff with animations. https://egghead.io/lessons/angularjs-animating-the-angular-way

Cheers!!!!

这篇关于AngularJS工厂布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！