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

Question

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

这是您的固定 fiddle :http://jsfiddle.net/nkuDW/1/

有很多问题。

您输入的错字$scope是$sopce的四倍。

如果您希望$scope.menu中的项目可以访问ActionOne和ActionTwo，则需要在定义$scope.menu的上方定义这些Action函数(这就是在将函数分配给变量时JavaScript的工作方式)。

您已经定义了两次ActionOne，其中第二个应该是ActionTwo。

ng-click需要方法调用，而不是函数的指针，因此应为ng-click="item.func()"。

您希望菜单项具有指向函数的指针，但是您已将它们定义为字符串...即使将"ActionOne()"排除在引号之外，由于以下两个原因，它仍然无法使用:

ActionOne在MyCtrl内部不作为功能存在，相反，需要将其引用为$scope.ActionOne

您只需要一个指向ActionOne的指针，您实际上并不想在这一点上调用它。由于括号的原因，当初始化MyCtrl时，将同时调用这两个 Action 。

在进入Angular之前了解JavaScript的基础可能是一个好主意，因为Angular假定您对语言的细微差别有很好的了解。道格拉斯·克罗克福德(Douglas Crockford)撰写的series of videos可以帮助您入门。