2017-08-04 18 views
0

私はテキストの違いを示す指示文を作成しています。このディレクティブでは、私はディレクティブで分割した2つのボタンが必要です。 simpliefied例は次のようになります。diffbuttondifferenceViewerでコンパイルされたHTML内に作成され指示句の親のクリックの角度指示

<script type="text/ng-template" id="differenceViewer.html"> 
    <div class="ibox-footer"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <diffbutton method="clickedBtn()">Foo</diffbutton> 
     </div> 
     </div> 
    </div> 
</script> 

.directive('differenceViewer', function($templateCache, $compile) { 
     return { 
     restrict: 'E', 
     scope: { 
      oldtext: '@', 
      newtext: '@', 
      template: '@', 
      heading: '@', 
      options: '=', 
      itemdata: '&', 
      method: '&' 
     }, 
     replace: false, 
     link: (scope, element, attr) => { 
      element.append(angular.element($compile($templateCache.get(scope.template))(scope))); 
     } 
    }; 
}).directive('diffbutton', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      method: '&' 
     }, 
     template: '<button class="btn btn-sm btn-success" ng-click="method()">Rollback</button>', 
     replace: true, 
     terminal: true, 
     link: (scope, element, attr) => { 
      scope.directiveClick = function(){ 
       console.log("directive method"); // is never called 
      } 

     } 
    } 
}) 

私はテンプレートスクリプトを経由してHTMLをコンパイルします。

すべての差分ビューを作成するコントローラ内のメソッドを呼び出す必要があります。

app.controller('MainCtrl', function($scope) { 
    $scope.clickedBtn = function() { 
    console.log('foo'); // is never called 
    } 
}) 

Here's a plunker問題を実証しています。

コントローラーメソッドへのディレクティブで自分のディレクティブをクリックしてボタンを転送できるようにするには、何を変更する必要がありますか?

私はthis questionの回答で作業していますが、まだ動作させることはできません。私はdifferenceViewerディレクティブに

scope.clickedBtn = function() {console.log("bar");} 

を追加した場合、

注意、それが呼び出される - 私が代わりに、コントローラのメソッドを呼び出す必要がありますが。

+0

'method'を' differenceViewer'に渡さないで、スコープ内で定義されていない 'differenceViewer'の中で' clickedBtn'を使うという問題 – BotanMan

+0

いいえ@BotanManいいえ、私がdifferenceViewerでclickedBtnを定義すると、コントローラにイベントを渡すことができません – Michael

+0

これは正しい方法です http://plnkr.co/edit/yiJ1S25FH2EPCtoO9nKo?p=preview – BotanMan

答えて

2

親から子要素にメソッドを渡してからクリックするとトリガーされます。例えば、(擬似コードでくる)

<parent-directive> 
    <child-directive totrigger="parentClickCallback()"></child-directive> 
</parent-directive> 

は、あなたの親ディレクティブで、あなたが

scope:{ 
    totrigger:'&' 
} 

とその子に設定結合その範囲に

$scope.parentClickCallback = function(){//do whatever you neeed} 

とあなたの子供のセットボタンをクリックするだけで簡単に追加できます。

<button ng-click="totrigger()">ClickMe</button> 

そのボタンをクリックするたびに、totriggerに添付された参照によってparentClickCallbackがトリガーされます。

あなたのコードを複雑にする必要があるのはどうして私は本当にわかりません。スコープバインドに不満があるのであれば、あなたのディレクティブにコントローラを必要とし、コントローラにバインドされた関数を渡してください。

+1

「toTrigger({$ param1:foo}」のようなパラメータを追加することもできます。 ) ''それから '' parentClickCallback($ param1) '' –

関連する問題