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: '&',

因此，您有兩個選擇。 您可以一起刪除vm.newElement = () => { alert("1") } 。

或其他選項，如果要在控制器中包含包裝器。 您將其重命名並從內部調用this.newElement() ：

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

在這種情況下，請確保在模板中使用新的函數名稱：

ng-click="btnCmpnt._newElement()"