如何在AngularJS指令模板中动态定义要用ng-click调用的函数

Question

我正在尝试根据模型动态生成表单输入和关联的操作菜单。我能够传递要使用的字段和菜单，但无法弄清楚如何配置ng-
click来调用模型中定义的适当函数。看到小提琴：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>

任何帮助，将不胜感激。我在指令中尝试了以下ng-click方法

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

我究竟做错了什么？还是有更好的方法来做到这一点（包含要调用的功能的菜单结构必须来自模型，以便我构建通用的表单生成功能）。

Answer 1

这是您的固定小提琴：http :
//jsfiddle.net/nkuDW/1/

它有很多问题。

1. 您有$scope4次错字$sopce。
2. 如果您希望其中的项目$scope.menu能够访问ActionOne和ActionTwo，则需要在定义的上方定义这些Action函数$scope.menu（这就是在将函数分配给变量时JavaScript的工作方式）。
3. 您已经ActionOne定义了两次，第二个应该是ActionTwo。
4. ng-click需要方法调用，而不是函数的指针，因此应为ng-click="item.func()"。
5. 您希望菜单项具有指向函数的指针，但是您已将它们定义为字符串…即使您将"ActionOne()"引号排除在外，由于以下两个原因，它仍然无法使用：
   1. ActionOne 在MyCtrl中不作为功能存在，而是需要引用为 $scope.ActionOne
   2. 您只需要一个指向ActionOne的指针，实际上并不需要在这一点上调用它。由于括号的原因，初始化MyCtrl时将同时调用这两个动作。

在进入Angular之前，了解JavaScript的基础可能是一个好主意，因为Angular假定您对语言的细微差别有很好的了解。道格拉斯·克罗克福德（Douglas
Crockford）提供了一系列视频，可以帮助您入门。