AngularJS：在指令中使用服务

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

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

我的问题是：我想做的是“坏”吗？以控制器的方式，我最终编写了一堆代码，可能多达5到6次，或者随着应用程序的增长，甚至更多。按照自定义指令的方式，我只编写一次，然后在需要的地方使用一个属性。是的，人们对这项服务有依赖性，但这并不像是世界末日，有些人让我开始认为我应该这么认为

---

值得一提的是，我觉得我已经听过很多次“关注点分离”了，我已经被它麻痹了。这让我想得太多了，因为我想用正确的方式做事，但我确实觉得我的工作效率不高。

在我看来，所有依赖于此服务的作用域都应该是单亲作用域的子作用域。如果您有父作用域负责与服务对话，那么任何作用域的任何指令都可以通过

$scope

上的

$parent

访问它。如果我理解正确，您有一堆元素，当特定服务加载数据时应该隐藏，然后在加载数据时再次显示，对吧?

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

• 他们可以是全球的应用程序（我认为这是你所追求的）
• 它们允许避免元素之间的直接耦合（这也是您关注的问题之一）

因此，在您的服务中，只要在事情发生时播放事件即可：

$rootScope.$broadcast（'loading-data'）；
AXAJSuffTorWhather（函数（）{
$rootScope.$broadcast（'data-loaded'）；
});

然后，将show/hide行为包装在一个指令中，该指令将侦听这些事件

.directive（'hideWhileLoadingData'，function（）{
返回{
链接：功能（范围、el、属性）{
作用域：$on（'loading-data'，function（）{
el.css（'display'，'none'）；
});
作用域：$on（'data-ready'，function（）{
el.css（‘显示’、‘块’）；
});                
}
};  
});

使用指令：

什么 在这里使用事件的优点是，稍后，它们可能由不同的服务或多个服务发起，并且只要事件相同，指令就不会受此影响

对于更复杂的行为，您还可以将事件和指令参数化，这样不同的元素将对不同类型的内容做出反应

---

我对这一点做了详细的阐述。

这是无关紧要的，但分离关注点和其他“最佳实践”旨在帮助您的应用程序更易于更改、推理和测试。所有这些都是有原因的，但不要仅仅因为有人告诉你去做，就陷入这样的陷阱，或者因为害怕做“错误”的事情而变得麻痹。同时，不要因为某件事情在当时没有意义而否定它——要愿意了解为什么这是一种推荐的做法。有一个平衡需要达成，记住，最终目标是做一些很酷的事情，并从中获得乐趣@布兰登泰利——这是个难题。我对它还不够熟悉，不知道别人告诉我的是好是坏还是介于两者之间。但我很感激你的建议和最后一句话！谢谢你的想法。最初，我使用的是那种“$broadcast/$on”设置。我甚至像你描述的那样对事件进行了参数化。我现在不这么做的原因很简单，就是我正在学习所有这些，并且想尝试两种方法。：）好吧，如果你得出了哪种方法更好的结论，你可以用你尝试过的方法的优缺点来更新你的问题；）的确但根据我到目前为止所做的所有研究，再加上我完全缺乏知识……这将是6对1/2打！从文档中可以看出：“作用域是按层次结构排列的，它模仿了应用程序的DOM结构。”所以我完全明白你的意思，但在某些方面，它也会让人觉得这是一种倒退——就像将我的应用程序的DOM结构排列起来，以适应你所描述的层次结构一样。