AngularJS：在指令中使用服务

发布时间：2020-12-17 17:18:14 所属栏目：安全来源：网络整理

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

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

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

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

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

解决方法

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

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

>他们可以在全球范围内应用(我认为这就是你所要求的).
>它们允许避免元素之间的直接耦合(也是您关注的问题之一).

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

$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','block');
      });                
    }
  };  
});

使用指令：

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

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

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

我做了一个example.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!