執行功能從變量稱爲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>