私はテキストの違いを示す指示文を作成しています。このディレクティブでは、私はディレクティブで分割した2つのボタンが必要です。 simpliefied例は次のようになります。diffbutton
はdifferenceViewer
でコンパイルされた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");}
を追加した場合、
注意、それが呼び出される - 私が代わりに、コントローラのメソッドを呼び出す必要がありますが。
'method'を' differenceViewer'に渡さないで、スコープ内で定義されていない 'differenceViewer'の中で' clickedBtn'を使うという問題 – BotanMan
いいえ@BotanManいいえ、私がdifferenceViewerでclickedBtnを定義すると、コントローラにイベントを渡すことができません – Michael
これは正しい方法です http://plnkr.co/edit/yiJ1S25FH2EPCtoO9nKo?p=preview – BotanMan