Wie definiere ich dynamisch eine Funktion zum Aufruf mit ng-Klick in AngularJS Direktive Vorlage

Question

Ich versuche, Formulareingaben und ein zugehöriges Aktionsmenü basierend auf dem Modell dynamisch zu generieren. Ich bin in der Lage, das zu verwendende Feld und das Menü zu übergeben, aber ich kann nicht herausfinden, wie man ng-click konfiguriert, um die entsprechende im Modell definierte Funktion aufzurufen. Siehe Geige: http://jsfiddle.net/ahonaker/nkuDW/

HTML:

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

myApp.directive('myDirective', function($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     scope : { 
      field: '=', 
      label: '=', 
      menu: '=' 
     }, 
     link: function (scope, element, attrs) { 
      element.html('{{label}}: <input ng-model="field"> <ul ng-repeat="item in menu"<li><a ng-click="item.func">{{item.title}}</a></li></ul>'); 
      $compile(element.contents())(scope); 
     } 
    } 
}); 
//myApp.factory('myService', function() {}); 

function MyCtrl($scope) { 
    $scope.status = 'You have not picked yet'; 

    $scope.menu = [ 
     { "title" : "Action 1", "func" : "ActionOne()"}, 
     { "title" : "Action 2", "func" : "ActionTwo()"}, 
     ] 

    $scope.fieldOne = "I am field 1"; 
    $scope.fieldTwo = "I am field 2"; 

    $scope.ActionOne = function() { 
     $sopce.status = "You picked Action 1"; 
    }  

    $scope.ActionOne = function() { 
     $sopce.status = "You picked Action 2"; 
    }    
} 

JS:

<div ng-app = "myApp"> 
    <div ng-controller="MyCtrl"> 
     <ul> 
      <p><my-directive field="fieldOne" label="'Field 1'" menu="menu"></my-directive></p> 
      <p><my-directive field="fieldTwo" label="'Field 2'" menu="menu"></my-directive></p> 
     </ul> 
     Hello, {{status}}! 
</div> 
</div> 

Jede Hilfe würde geschätzt. Ich habe versucht, die folgenden NG-Klick-Ansätze in der Richtlinie

ng-click={{item.func}} 
ng-click="item.func" 
ng-click="{{item.func}}" 

Was mache ich falsch? Oder gibt es einen besseren Weg, dies zu tun (die Menüstruktur einschließlich der anzurufenden Funktionen muss aus dem Modell stammen, damit ich eine generische Formgenerierungsfähigkeit aufbauen kann).

Answer 1

Hier ist Ihre feste Geige: http://jsfiddle.net/nkuDW/1/

Es mit ihm sehr viele Probleme.

1. Sie haben einen Tippfehler $scope typo'd 4 mal als $sopce.
2. Wenn Sie Einzelteile wünschen, innerhalb $scope.menu Zugriff auf ActionOne zu haben und ActionTwo, müssen Sie diese Aktion Funktionen oben definieren, wo Sie definieren $scope.menu (das ist nur, wie JavaScript funktioniert, wenn Sie auf die Funktionen Variablen sind zuweisen).
3. Sie haben ActionOne zweimal definiert, wobei die zweite ActionTwo sein sollte.
4. ng-click erwartet einen Methodenaufruf, nicht einen Zeiger auf eine Funktion, also sollte es ng-click="item.func()" sein.
5. Sie möchten Ihre Menüpunkte Zeiger auf Funktionen haben, aber Sie haben sie als Strings definiert ... auch wenn Sie "ActionOne()" aus Zitaten nehmen, es wird immer noch aus zwei Gründen nicht funktionieren:
   1. ActionOne existiert nicht als Funktion innerhalb von MyCtrl, sondern muss referenziert werden als $scope.ActionOne
   2. Sie möchten nur einen Zeiger auf ActionOne, den Sie eigentlich nicht an dieser Stelle aufrufen möchten. Wegen der Klammer würden beide Aktionen aufgerufen werden, wenn MyCtrl initialisiert wird.

Es wäre wahrscheinlich eine gute Idee, die Grundlagen von JavaScript zu verstehen, bevor sie in Angular Springen, als Angular vorausgesetzt, dass Sie ein gutes Verständnis für die Nuancen der Sprache haben. Es gibt eine series of videos von Douglas Crockford, mit der Sie beginnen können.

Answer 2

Ich wollte nicht mit HTML-Code in meiner eckigen App oder Direktiven oder die Verwendung von eval beschäftigen.so wickelte ich meine vorhandenen Funktionen nur in einer Funktion:

$scope.get_results = function(){ 

    return { 
      message: "A message", 
      choice1: {message:"choice 1 message", f: function(){$scope.alreadyDefinedFunction1()}}, 
      choice2: {message:"choice 2 message", f: function(){$scope.alreadyDefinedFunction2()}}, 
     }; 
} 

in einer anderen Funktion:

$scope.results2 = $scope.get_results(); 

Snippet Verwendung in html:

<ul class="dropdown-menu scroll-div"> 
    <li><a ng-click="results2.choice1.f()">{{results_2_menu.choice1.message}}</a></li> 
    <li><a ng-click="results2.choice2.f()">{{results_2_menu.choice2.message}}</a></li> 
</ul> 

auf Grundlage war js Geige: http://jsfiddle.net/cdaringe/FNky4/1/