Jak dynamicznie definiować funkcję do wywołania za pomocą polecenia ng-click w szablonie dyrektywy AngularJS

Question

Próbuję dynamicznie generować dane wejściowe formularzy i powiązane z nimi menu akcji oparte na modelu. Jestem w stanie przekazać pole do użycia i menu, ale nie mogę się dowiedzieć, jak skonfigurować ng-click, aby wywołać odpowiednią funkcję zdefiniowaną w modelu. Zobacz skrzypce: 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> 

Każda pomoc będzie mile widziane. Spróbowałem następujących podejść click-in w dyrektywie

Co robię źle? Czy istnieje lepszy sposób to zrobić (struktura menu, w tym funkcje, które należy wywołać, musi pochodzić z modelu, aby móc utworzyć generyczną zdolność generowania formularzy).

Answer 1

Tu masz stały skrzypce: http://jsfiddle.net/nkuDW/1/

Było bardzo wiele problemów z nim.

1. Masz literówkę $scope literówka 4 razy jako $sopce.
2. Jeśli chcesz elementy w $scope.menu mieć dostęp do ActionOne i ActionTwo, musisz zdefiniować te funkcje akcji powyżej, gdzie można zdefiniować $scope.menu (to po prostu działa jak JavaScript, gdy jesteś przypisanie funkcji do zmiennych).
3. Jednoznacznie zdefiniowano ActionOne, gdzie drugi powinien być ActionTwo.
4. ng-click oczekuje wywołania metody, a nie wskaźnika do funkcji, więc powinno być ng-click="item.func()".
5. Chcesz, aby pozycje menu mają wskaźniki do funkcji, ale już zdefiniowano je jako ciągi ... nawet jeśli wziąć "ActionOne()" z cytatami, to nadal nie będzie działać z dwóch powodów:
   1. ActionOne nie istnieje jako funkcja wewnątrz MyCtrl, zamiast tego musi być oznaczony jako $scope.ActionOne
   2. Po prostu chcesz wskaźnik do ActionOne, w rzeczywistości nie chcesz wywoływać go w tym momencie. Ze względu na nawias obie czynności zostaną wywołane, gdy MyCtrl zostanie zainicjalizowany.

To prawdopodobnie byłby to dobry pomysł, aby zrozumieć podstawy JavaScriptu przed skokiem do kątowa, kanciastych zakłada, że ​​masz dobre zrozumienie niuansów języka. Jest jeden series of videos Douglasa Crockforda, który może cię uruchomić.

Answer 2

Nie chciałem zajmować się kodem html w mojej aplikacji kątowej, dyrektywach lub użyciu eval.więc po prostu zawinięte moje istniejące funkcje w funkcję:

$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()}}, 
     }; 
} 

w innej funkcji:

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

fragment użytku w 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> 

oparto na ten js skrzypce: http://jsfiddle.net/cdaringe/FNky4/1/