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

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>