Funktion innerhalb eines Objekts als Parameter für eine Direktive aufrufen

Question

Zur Zeit erweitere ich meine Anwendung, sodass ich eine Direktive (die ein Tabellenraster generiert) ein Objekt für zusätzliche Schaltflächen geben kann (um andere Aktionen hinzuzufügen).

Jetzt kann ich den Knopf zeigen, aber ich muss etwas Code als Funktion ausführen, die für einen Klick auf diesen Knopf gelten sollte.

Das Objekt selbst enthält Strings und Funktion in einer gemischten Art und Weise, wie folgt aus:

<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> 

Meine Richtlinie Vorlage wie folgt aussieht:

<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> 

Wie kann ich die Onclick-Funktion ausführen?

Answer 1

Sie direkt eine Funktion eines Objekts des Umfangs Ihrer Ansicht nach mit anrufen:

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

nicht die Klammer in der Funktionsaufruf Vergessen Sie auch wenn es keine Parameter ist

hier ist eine Demo, wie es funktioniert:

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>