AngularJS:在指令中使用服务

本文介绍了AngularJS:在指令中使用服务的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

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

This is an angularjs app. I have a service that handles the loading of content (ajax). While the service is getting the content, a number of things throughout the app hide, later showing again (depending on the content returned). They might have the same scope, different scope, whatever. They just need to hide while content is loading, and then show when it's done. Pretty normal stuff.

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

Right now, I have separate controllers watching a "loading" property of the service and using regular angular directives (ng-show, ng-hide, etc.) to show/hide. But this feels like overkill. I'd prefer to write a custom "loading" directive that injects the loading service and does the watching and showing/hiding.

我的问题是:我想做的事情不好"吗?在控制器方式中，我最终编写了一堆代码，可能多达 5 到 6 次，甚至随着应用程序的增长而增加.自定义指令方式，我编写一次并在需要的地方使用属性.是的 - 对这项服务有依赖性，但这并不像某些人让我开始认为我应该这么认为的世界末日.

My question is: Is what I want to do "bad"? The controller way, I end up boilerplating a bunch of code, maybe up to like 5 or 6 times, or even more as the app grows. The custom directive way, I write it once and use an attribute where I need it. Yeah - there's a dependency on that service, but that just doesn't feel like the end of the world that some people have made me start to think I should think it is.

就其价值而言，我觉得我听过很多次关注点分离"，我已经被它麻痹了.这让我想得太多，因为我想以正确的方式做事，但我确实感觉效率不高.

For what it's worth, I feel like I've heard "separation of concerns" so many times I've become paralyzed by it. It leads me to overthink everything because I want to do things the right way, but it sure doesn't feel like I'm being very productive.

推荐答案

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

If I understood correctly, you have a bunch elements that should hidden when a particular service is loading data, and then be displayed again when the data is loaded, right?

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

In that case, events might be a good solution:

对于应用程序而言，它们可以是全局的(我认为正是您想要的).它们允许避免元素之间的直接耦合(这也是您关注的问题之一). they can be global to the appliciation (which i think is what you are aksing for). they allow for avoiding direct coupling between elements (also one of your concerns).

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

So, in your service, just broadcast events when stuff happens:

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

然后，将显示/隐藏行为包装在一个指令中，该指令将侦听这些事件.

Then, wrap the show/hide behaviour in a directive that will listen to those events.

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

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

The advantage of using events here, is that later on, they could be originated by a different service, or by multiple services, and the directive will not be affected by that as long as the events are the same.

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

For more complex behaviour, you could also parametrize the events and the directive, so different elements will react to different kind of stuff.

我已经制作了一个示例.

这篇关于AngularJS:在指令中使用服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！