Question

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

现在，我有单独的控制器观察服务的“加载”属性，并使用常规角度指令（ng-show，ng-hide等）来显示/隐藏。但这感觉有点矫枉过正。我更喜欢编写一个自定义的“加载”指令，它注入加载服务并进行观察和显示/隐藏。

我的问题是：我想做什么“糟糕”？控制器的方式，我最终需要对一堆代码进行电镀，最多可能需要5到6次，甚至更多，因为应用程序的增长。自定义指令方式，我写了一次，并使用我需要它的属性。是的 - 这种服务依赖于这种服务，但这并不像世界末日那样让一些人开始认为我应该认为它是。

对于它的价值，我觉得我已经多次听到“关注点分离”，我已经因此而陷入瘫痪。它让我过度思考一切，因为我想以正确的方式做事，但肯定不会觉得我的工作效率很高。

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>

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

对于更复杂的行为，您还可以参数化事件和指令，因此不同的元素会对不同类型的东西做出反应。

我已经制作了example。

Answer 2

在我看来，依赖于此服务的所有范围都应该是父范围的子节点。如果您的父作用域负责与服务交谈，那么任何作用域的任何指令都可以通过$parent上的$scope访问它。

AngularJS：在指令中使用服务

2 个答案: