カスタムディレクティブからanglarjsコントローラベースのメソッドを呼び出す

Question

私はanglejsアプリケーションでjqueryステップを使用しています。私はカスタムディレクティブを使ってjqueryプラグインを初期化しました。フォームの最終ステップで終了ボタンをクリックすると、すべての入力を検証する必要があります。それを行うために、私はonFinishedと呼ばれるオプションを設定する必要があることを知っています。今、このセクションで私のコントローラーメソッドをどのように呼び出すのですか？あなたはディレクティブ

app.directive('step', [function() { 
    return { 
     restrict: 'EA', 
     scope: { 
     stepChanging: '=' 
     }, 
     compile: function(element, attr) { 
      element.steps({ 
      labels: {finish: "SUBMIT"}, 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      stepsOrientation: "vertical", 
      onFinished: function (event, currentIndex) { 
      console.log("submit button has been clicked"); 

      $scope.validator(); //problem here 

      } 
     }); 
     return { 
      //pre-link 
      pre:function() {}, 
      //post-link 
      post: function(scope, element) { 
      //element.on('stepChanging', scope.stepChanging); 
      } 
     } 
     } 
    }; 
    }]) 

Answer 1

が孤立範囲である、それはuが関数を渡したい場合は、

scope:{ 

validator:'&' 

} 

以下のようなあなたのディレクティブのスコープオブジェクトに&を使用して、ディレクティブでこれを渡すことができ、コントローラのスコープにアクセスすることはできません

<step validator='validator'/> 

Answer 2

以下のような関数式&バインドを使用し、親コントローラに単離スコープ付き指令からイベントを渡すことing。

ディレクティブコンパイルフェーズでは、関数の使用範囲がありません。
は、ポストリンクに関数を移動し ：

app.directive('step', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
     //stepChanging: '=', 
     stepChanging: '<', 
     //USE expression binding 
     validator: '&' 
     }, 
     //compile: function(element, attr) { 
     link: function postLink(scope,element,attrs) { 
      element.steps({ 
       labels: {finish: "SUBMIT"}, 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       stepsOrientation: "vertical", 
       onFinished: function (event, currentIndex) { 
       console.log("submit button has been clicked"); 

       //$scope.validator(); //problem here 
       scope.validator(); 
       } 
     ); 
     } 
     /* 
     return { 
      //pre-link 
      pre:function() {}, 
      //post-link 
      post: function(scope, element) { 
      //element.on('stepChanging', scope.stepChanging); 
      } 
     }*/ 
     } 
    }; 
}); 

使用法：

<step step-changing="vm.changing" validator="validator()"> 
</step> 

は今後、結合双方向=を使用しないでください。代わりに一方向の<バインディングを使用してください。より効率的で、Angular 2+に移行するためのより良い方法を提供します。

また、要素のディレクティブの末尾が/>であると、一部のブラウザで問題が発生することもありません。代わりに、終了タグ</step>を使用してください。