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()"