Question

我是组件事的新手。我正在使用ng-repeat创建按钮。问题是我必须将功能传递给该按钮。所以我应该这样做。我尝试在对象中传递函数但它没有工作。

以下是我为组件创建对象的方法：

createButtonFunction:function(){
          var ButtonsArray = [];

          ButtonsArray.push(new componentSvc.createButtonObject(
            "Validate",
            "submit",
            "../assets/img/icon_save.png",
            "validate($event)")
          );
          ButtonsArray.push(new componentSvc.createButtonObject(
            "close",
            "button",
            "../assets/img/icon_cross.png",
            "cancel()") /// This is the function
          );
          return ButtonsArray;
        }

这是我调用按钮组件的代码：

<div class="pull-right">
        <span ng-repeat="butn in $ctrl.createButtonObject">
           <button-component button-obj="butn" button-function="butn.clickFunction"></button-component>
        </span>
        </div>

怎么做？

Answer 1

您可以使用以下内容：

this.buttons = [{title: 'Validate', action: function(){...}, icon: '...'}, 
  {title: 'Close', action: function(){...}, icon: '...'}]

HTML：

<button ng-repeat="button in $ctrl.buttons" ng-click="button.action()">{{button.title}}</button>

输出的新示例

parent.component.js：

app.component("app-parent", {
   template: '<app-child buttons="$ctrl.buttons"></app-child>',
   controller: function AppParent(){
     this.buttons = [{title: 'Validate', action: this.action, icon: '...'}, 
      {title: 'Close', action: this.action, icon: '...'}],

      this.action = function(){

      }
   }
})

child.component.js

app.component("app-child", {
 template: "<button ng-repeat="">...",
 bindings: {
   buttons: '='
 }
 controller: function AppChild(){

 }
})

或者当你没有动态按钮时，可以使用以下内容： <app-child on-close="onCloseAction()" on-validate="onValidateAction()">但是对于此示例，您必须知道将使用哪些按钮。在子组件中将是这样的：

app.component("app-child", {
 template: "<button on-click="this.onClose()">Close</button>",
 bindings: {
   onClose: '&',
   onValidate: '&'
 }
 controller: function AppChild(){

 }
})

Answer 2

在JavaScript中，function与object类似，通过引用传递。所以一旦你有了一个引用或一个指向函数的指针，你可以传递这个引用，这样就可以在其他地方调用它，你只需要知道函数将被调用的上下文。

当然，你不能以这种方式传递函数："cancel()"。您需要传入实际变量。例如：

const cancelFunction = function() {
    // Do cancel logic here
};

ButtonsArray.push(new componentSvc.createButtonObject(
    "close",
    "button",
    "../assets/img/icon_cross.png",
    cancelFunction) // Passing the function through a variable
);

在Angularjs组件中通过对象传递函数

2 个答案: