4

我有一个带有 2 个指令的输入元素：
-direc（优先级 1）-directive（
优先级 0）

即使direc应该先执行，指令也会先执行。
为什么？

这是一个片段来显示正在发生的事情

angular.module('app', [])


.directive('direc', function(){
  
  return {
    priority : 1,
    link : function(scope, element){
      
      element.on('click', function(){
          alert('direc');
      });
    
    }
  };  

})

.directive('directive', function(){
  
  return {
    priority : 0,
    link : function(scope, element){
      
      element.on('click', function(){
          alert('directive');
      });
    
    }
  };  

});
<div ng-app="app">

   <input type="text" direc directive/>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

4

2 回答 2

2

基本上指令出现时会发生什么，角度compile首先运行指令函数。

在这里，compile您可以控制原始 DOM/普通 DOM，在compile功能上您将没有范围。编译函数负责返回preLinkandpostLink函数。其中preLink首先被调用

内部preLink函数可以让 DOM 在范围内可用，在 之后preLink，它会渲染内部元素或其他指令。在遍历该 DOM 的每个元素后，它会触发该postLink函数。它纯粹用作用域编译 DOM。这就是为什么事件directive首先被注册，因为它具有最低优先级并具有其功能postLink。

用于理解流程的 Plunkr（查看控制台以使其更清晰）

您应该在函数内注册这些事件，preLink以便在执行指令函数的编译后注册事件。

代码

angular.module('app', [])
.directive('direc', function() {
  return {
    priority: 1,
    compile: function(element, attributes) {
      console.log("Compiled direc")
      return {
        pre: function(scope, element, attrs) {
          console.log("Prelink for direc firective generated");
          element.on('click', function() {
            alert('direc');
          });
        },
        post: function(scope, element, attrs) {
          console.log("Called After direc DOM linked with scope")
        }
      }
    },
  }
})
.directive('directive', function() {
  return {
    priority: 0,
    compile: function(element, attributes) {
      console.log("Compiled direc")
      return {
        pre: function(scope, element, attrs) {
          console.log("Prelink for direc firective generated");
          element.on('click', function() {
            alert('directive');
          });
        },
        post: function(scope, element, attrs) {
          console.log("Called After directive DOM linked with scope")
        }
      }
    },
  };
});

工作Plunkr

于 2015-07-28T18:27:03.703 回答
1

根据文档：

当在单个 DOM 元素上定义了多个指令时，有时需要指定应用指令的顺序。优先级用于在调用编译函数之前对指令进行排序。优先级被定义为一个数字。首先编译具有更高数值优先级的指令。预链接功能也按优先级顺序运行，但后链接功能按相反顺序运行。具有相同优先级的指令的顺序未定义。默认优先级为 0。

我认为您混淆了优先级的功能，因为它与首先调用哪个指令的事件侦听器无关，而与哪个首先运行其链接功能无关。

如果在执行链接函数时对元素进行更改，您可以看到不同之处：

angular.module('app', [])
.directive('direc', function(){

  return {
    priority : 1,
    link : function(scope, element){
      element.html('direc with priority 1');

      element.on('click', function(){
        alert('direc');
      });

    }
  };  

})

.directive('directive', function(){

  return {
    priority : 0,
    link : function(scope, element){
      element.html('directive with priority 0');

      element.on('click', function(){
        alert('directive');
      });

    }
  };  

});

具有最低优先级的元素是最后一个运行的元素，因此生成的 HTML 是“优先级为 1 的直接”

这是一个工作 plunkr：http ://plnkr.co/edit/VKqiMQDyMFsFguuRp7Ko?p=preview

于 2015-07-28T18:18:15.263 回答