在对象中调用函数作为指令的参数

Question

目前我正在扩展我的应用程序，所以我可以给一个指令（它生成一个 table 网格）一个对象来显示额外的按钮（用于添加其他操作）。

现在我可以显示该按钮了，但我需要执行一些代码作为函数，该函数应适用于单击该按钮。

对象本身以混合方式包含字符串和函数，如下所示：

<tablegrid
  table="flavorings"
  additional-buttons="[{name: 'add', onclick: 'function(){ }', icon: 'fa fa-plus'}]"
  show-actionbutton="true"
  show-rating="true"
  show-search="true"
  show-rowcheckbox="true"
  show-header="true">
</tablegrid>

我的指令模板如下所示：

<button ng-repeat="aB in additionalButtons" class="btn btn-primary" ng-click="ab.onclick" type="button">
  <i ng-class="aB.icon" ng-show="aB.icon  != ''" aria-hidden="true"></i>&nbsp;
  <span>{{ 'TABLEGRID_'+aB.name | uppercase | translate }}</span>
</button>

如何执行 onclick 函数？

Answer 1

您可以直接调用视图中作用域对象的函数：

ng-click="yourObject.functionName(parameters)"

即使没有参数也不要忘记函数调用中的括号

这是它如何工作的演示：

var app = angular.module('myApp', []);

app.controller('MyCtrl', function($scope) {
    $scope.additionalButtons = [
        {'name': 'First', 
         'onclick': function() {alert('1')}
        }, 
        {'name': 'Second', 
         'onclick': function() {alert('2')}
        }
    ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-repeat="ab in additionalButtons" ng-click="ab.onclick()">Click {{ab.name}}</button>
</div>

在对象中调用函数作为指令的参数

Call function within object as parameter for a directive

javascript

angularjs

angularjs-ng-click