4


-direc (優先度レベル 1) -directive (優先
度レベル 0)という2 つのディレクティブを持つ 1 つの入力要素があります。

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関数をAngularで実行します。

ここではcompile、生の DOM / プレーンな DOM を制御できますが、compile関数ではスコープがありません。preLinkコンパイル関数は、 and関数を返す役割をpostLink果たします。どちら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")
        }
      }
    },
  };
});

働くプランカー

于 2015-07-28T18:27:03.703 に答える