AngularJS：在指令使用服务 [英] AngularJS: Using services in directives

问题描述

这是一个angularjs应用程序。我有一个处理的内容（AJAX）加载的服务。虽然该服务获取内容，（根据返回的内容）一些事情整个应用程序隐藏，后来再次展示。他们可能具有相同的范围，不同范围，等等。他们只需要在加载内容隐藏起来，然后当它这样做显示。 pretty正常的东西。

现在，我有独立的控制器观看服务的加载财产和使用规则的角度指令（NG-显示，NG-躲，等）显示/隐藏。但是这种感觉就像矫枉过正。我想preFER编写自定义的加载指令，注入加载的服务和做的鲸和显示/隐藏。

我的问题是：什么是我想要做的坏？该控制器的方式，我结束了boilerplating一堆code，也许到喜欢5或6倍，甚至是应用程序变得更加。自定义指令的方式，我把它写一次，我需要用它的属性。是的 - 有上服务的依赖，但只是感觉并不像世界上，有些人让我开始觉得我应该认为它是年底

。

有关它的价值，我觉得我已经听过很多次我已经成为它瘫痪关注点分离。这使我overthink一切，因为我想要做的事情以正确的方式，但它肯定不会觉得我是非常有成效的。

解决方案

如果我理解正确的话，你必须在一个特定的服务加载数据应该隐藏，然后在加载数据时，再次显示了一堆元素，右？

在这种情况下，活动可能是一个很好的解决方案：

• 它们可以是全局的appliciation（其中的我觉得的是要aksing什么）。


• 它们允许避免直接的连接的（也是你关心的问题之一）元素之间。

所以，在你的服务，只需广播事件：当事情发生：

$ rootScope $广播（加载数据）。
axajStuffOrWhatever（函数（）{
   $ rootScope $广播（数据装载）。
}）;


然后，在包装显示/隐藏行为的指令将侦听到的事件。

.directive（'hideWhileLoadingData'，函数（）{
  返回{
    链接：功能（范围，EL，ATTRS）{
      （范围。在$（'加载数据'功能）{
        el.css（'显示器'，'无'）;
      }）;
      （范围。在$（'数据准备好'，功能）{
        el.css（'显示器'，'块'）;
      }）;
    }
  };
}）;


使用指令：

＆LT; D​​IV隐藏，而加载数据＆GT;＆东西LT; / DIV＆GT;


这里使用的事件的优点是，以后，它们可以由不同的服务，或由多个服务起源，并且该指令将不会由该影响，只要活动是相同的。

有关更复杂的行为，你也可以参数化的事件和指令，因此不同的元素，以别样的东西做出反应。

我做了一个例子这一点。

This is an angularjs app. I have a service that handles the loading of content (ajax). While the service is getting the content, a number of things throughout the app hide, later showing again (depending on the content returned). They might have the same scope, different scope, whatever. They just need to hide while content is loading, and then show when it's done. Pretty normal stuff.

Right now, I have separate controllers watching a "loading" property of the service and using regular angular directives (ng-show, ng-hide, etc.) to show/hide. But this feels like overkill. I'd prefer to write a custom "loading" directive that injects the loading service and does the watching and showing/hiding.

My question is: Is what I want to do "bad"? The controller way, I end up boilerplating a bunch of code, maybe up to like 5 or 6 times, or even more as the app grows. The custom directive way, I write it once and use an attribute where I need it. Yeah - there's a dependency on that service, but that just doesn't feel like the end of the world that some people have made me start to think I should think it is.

For what it's worth, I feel like I've heard "separation of concerns" so many times I've become paralyzed by it. It leads me to overthink everything because I want to do things the right way, but it sure doesn't feel like I'm being very productive.

解决方案

If I understood correctly, you have a bunch elements that should hidden when a particular service is loading data, and then be displayed again when the data is loaded, right?

In that case, events might be a good solution:

• they can be global to the appliciation (which i think is what you are aksing for).
• they allow for avoiding direct coupling between elements (also one of your concerns).

So, in your service, just broadcast events when stuff happens:

$rootScope.$broadcast('loading-data');
axajStuffOrWhatever(function() {
   $rootScope.$broadcast('data-loaded');
});

Then, wrap the show/hide behaviour in a directive that will listen to those events.

.directive('hideWhileLoadingData', function() {
  return {
    link: function(scope, el, attrs) {
      scope.$on('loading-data', function() {
        el.css('display', 'none');
      });
      scope.$on('data-ready', function() {
        el.css('display', 'block');
      });                
    }
  };  
});

Use the directive:

<div hide-while-loading-data>something</div>

The advantage of using events here, is that later on, they could be originated by a different service, or by multiple services, and the directive will not be affected by that as long as the events are the same.

For more complex behaviour, you could also parametrize the events and the directive, so different elements will react to different kind of stuff.

I've made an example of this.

这篇关于AngularJS：在指令使用服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！