AngularJS:在指令中使用服务

Question

这是一个 angularjs 应用程序。我有一个处理内容加载的服务(ajax)。当服务获取内容时，整个应用程序中的许多内容会隐藏，稍后会再次显示(取决于返回的内容)。它们可能具有相同的范围，不同的范围，等等。他们只需要在内容加载时隐藏，然后在加载完成时显示。很正常的东西。

现在，我有单独的 Controller 监视服务的“加载”属性并使用常规 Angular 指令(ng-show、ng-hide 等)来显示/隐藏。但这感觉有点矫枉过正。我更喜欢编写一个自定义的“加载”指令来注入(inject)加载服务并进行观察和显示/隐藏。

我的问题是:我想做的事情是“坏的”吗？ Controller 的方式，我最终会样板化一堆代码，可能高达 5 或 6 次，甚至随着应用程序的增长甚至更多。自定义指令方式，我编写一次并在需要的地方使用属性。是的 - 对这项服务有依赖性，但这并不像是世界末日，有些人让我开始认为我应该认为它是世界末日。

对于它的值(value)，我觉得我已经听过很多次“关注点分离”了，我已经被它麻痹了。它导致我过度思考一切，因为我想以正确的方式做事，但它肯定不会让人觉得我很有效率。

Answer 1

如果我理解正确，你有一堆元素应该在特定服务加载数据时隐藏，然后在加载数据时再次显示，对吧？

在这种情况下，事件 可能是一个很好的解决方案:

它们对于应用程序来说可以是全局的(我认为这就是你所要求的)。

它们允许避免元素之间的直接耦合(也是您关注的问题之一)。

因此，在您的服务中，只需 广播事件当事情发生时:

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

然后，将显示/隐藏行为包装在 中。指令 将监听这些事件。

.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');
      });                
    }
  };  
});

使用指令:

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

在这里使用事件的好处是，稍后它们可以由不同的服务或多个服务发起，只要事件相同，指令就不会受到影响。

对于更复杂的行为，您还可以参数化事件和指令，因此不同的元素将对不同类型的东西使用react。

我做了一个example这个的。