AngularJS:在指令中使用服务

Question

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

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

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

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

Answer 1

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

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

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

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

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

然后,将show/hide行为包含在将侦听这些事件的指令中.

.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>

在这里使用事件的优点是,稍后,它们可以由不同的服务或多个服务发起,并且只要事件相同,指令就不会受到该指令的影响.

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

我举了一个例子.