Question

我的代码：

<li class="grid--col2of10" ng-repeat="button in buttons">
   <button ng-show="button.show" class="btn--action-{{button.color}} icon-{{button.icon}}" ng-click="{button.clickAction}">{{button.text}}</button>
</li>

我的对象：

var btns = {
    "back": {
      "color": "red",
      "clickAction": "prevStep",
      "icon": "left",
      "text": "Back"
    }, 
    "cancel": {
      "color": "red",
      "icon": "block",
      "text": "Cancel"
    },
    "clear": {
      "color": "blue",
      "icon": "cancel",
      "text": "Clear"
    },
    "save": {
      "color": "green",
      "icon": "download",
      "text": "Save"
    },
    "next": {
      "color": "green",
      "clickAction": "nextStep",
      "icon": "right-after",
      "text": "Save and Continue"
    }
  };

是否可以使button.clickAction成为在AngularJS中执行的函数？

btns对象位于指令内，并使用指令templateUrl选项调用html。

Answer 1

想出来。我无法在HTML中执行它，但我通过调用指令对象中的函数使其工作：

var btns = {
    "back": {
      "color": "red",
      "clickAction": function() { prevStep(); },
      "icon": "left",
      "text": "Back"
    }, 
    "cancel": {
      "color": "red",
      "icon": "block",
      "text": "Cancel"
    },
    "clear": {
      "color": "blue",
      "icon": "cancel",
      "text": "Clear"
    },
    "save": {
      "color": "green",
      "icon": "download",
      "text": "Save"
    },
    "next": {
      "color": "green",
      "clickAction": function() { nextStep(); },
      "icon": "right-after",
      "text": "Save and Continue"
    }
  };

HTML：

<li class="grid--col2of10" ng-repeat="button in buttons">
   <button ng-show="button.show" class="btn--action-{{button.color}} icon-{{button.icon}}" ng-click="button.clickAction()">{{button.text}}</button>
</li>

在AngularJS中从变量调用的执行函数

1 个答案: