AngularJS - コンポーネントに関数を呼び出す

Question

私がコンポーネントに持つ関数を呼び出そうとしています。ここで

は私のコンポーネントbuttonsControllerからのコードです：ここでは

(function(){ 
"use strict"; 

    angular 
     .module('my') 
     .component('myButton', { 
     templateUrl: '../app/src/component/buttons.html', 
     controller: buttonController, 
     controllerAs: 'btnCmpnt', 
     bindings: { 
      newElement: '&', 
      editElement: '&', 
      deleteElement: '&', 
      newTitle: '@', 
      editTitle: '@', 
      deleteTitle: '@' 
     } 
     }); 

    function buttonController($scope) { 


     var vm = this;  

     vm.newElement = () => { 
     alert("1") 
     } 
     vm.editElement = () => { 
     alert("2") 
     } 
     vm.deleteElement = () => { 
     alert("3") 
     } 

    } 

})(); 

は私buttons.htmlは

<div class="col-md-12"> 
    <button ng-if="btnCmpnt.newTitle" title="Add configuration" class="btn btn-primary btn-md" ng-click="btnCmpnt.newElement()"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {{btnCmpnt.newTitle}}</button> 
</div> 

であり、これは私が私のコンポーネントを呼び出す私のhtmlです：

<my-button new-title="New" new-element="newElement();"></my-button> 

自分の関数を呼び出すことができません。

私を助けることができますか？

よろしくお願いいたします。

Answer 1

コンポーネント内部からバインディングメソッドを呼び出すことはありません。代わりに、コンポーネントコントローラメソッドで上書きします。この

vm.newElement =() => { 
    alert("1") 
} 

が結合上書きされます：

newElement: '&', 

だから、2つのオプションがあります。 vm.newElement =() => { alert("1") }を一括して削除するか、

または、コントローラ内にラッパーが必要な場合は、他のオプション。あなたはそれを名前を変更し、内部からthis.newElement()を呼び出します。この場合、

vm._newElement =() => { 
    alert("1") 
    this.newElement() // call binding, outside function 
} 

は、テンプレートに新しい関数名を使用してください：

ng-click="btnCmpnt._newElement()"