Question

在给定的HTML元素上，您可以定义指令链接的顺序，而无需在指令中对priority进行硬编码以允许独立的指令链接吗？

示例：

假设对于给定的元素点击，我们想要

检查用户是否已通过身份验证
记录操作
加载数据
提交表格。

但是，步骤1-4都是单一责任，彼此不了解。通常，步骤4不依赖于步骤1-3，因此以下都是有效按钮：

<button check-user-is-authenticated log-some-action load-new-data submit-form></button>
<button submit-form log-some-action></button> 
<button check-user-is-authenticated submit-form></button>

但是，各个按钮确实知道指令应该运行的顺序：对于<button submit-form log-some-action></button>，我们要提交表单然后记录数据。

checkUserIsAuthenticated指令的示例。其他指令类似。

MyApp.directive('checkUserIsAuthenticated', ['app', (app) ->
  {
    restrict: 'A',
    link: ( scope, element, attrs ) ->
      element.bind( "click", (event) ->
        if(app.authenticated)
          #continue running directives
          true
        else
          #Go and authenticate then continue with any other directives
          app.goAuthenticate()
      )
  }
])

大多数指令不依赖于当前的控制器/作用域，因此使用控制器来处理这个指令会在应用程序的许多控制器中添加大量代码重复。

Answer 1

只是解决问题的一种方法：

编写一个处理click事件的指令并调用提供的服务方法：

<button chained-actions="a:b:c">Action a b c</button>

modul defintion：

angular.module('myApp', [])

.factory('a', function($http){
  return function(){
    console.log('A');
  }
})

.factory('b', function($http){
  return function(){
    console.log('B');
  }
})

.factory('c', function($http){
  return function(){
    console.log('C');
  }
})

.directive('chainedActions', function($injector){
  return function($scope, $element, $attr){
      $element.on('click', function(){
         $scope.$apply(function(){
         var actions = $attr.chainedActions.split(':')
         angular.forEach(actions, function(action){
             var actionServie = $injector.get(action);
             actionServie();
         });
      });
    });
  };
})
;

这里是plunker http://plnkr.co/edit/jpRIAhZWHrEBcN2mBieb?p=info

在AngularJS中，您是否可以为每个元素链接具有不同定义顺序的属性指令事件？

1 个答案: