我正在尝试动态生成表单输入和基于模型的关联动作菜单.我可以传递要使用的字段和菜单,但是我无法弄清楚如何配置ng-click以调用模型中定义的相应函数.看到小提琴：
http://jsfiddle.net/ahonaker/nkuDW/
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}}"
这是你的固定小提琴：
http://jsfiddle.net/nkuDW/1/
有很多问题.
>你的打字错误为$sopce的4倍.
>如果您希望$scope.menu中的项目可以访问ActionOne和ActionTwo,则需要在上面定义您定义$scope.menu的那些Action函数(这就是当您为变量分配函数时JavaScript如何工作) .
>你有ActionOne定义了两次,其中第二个应该是ActionTwo.
ng-click是期望一个方法调用,而不是一个指向函数的指针,因此应该是ng-click =“item.func()”.
>您希望您的菜单项具有指向功能的指针,但您已将其定义为字符串…即使您将“ActionOne()”从引号中删除,仍然无法工作的原因有两个：
> ActionOne不存在作为MyCtrl里面的一个功能,而是需要被引用为$scope.ActionOne
>你只需要一个指向ActionOne的指针,你实际上并不想在这一点上调用它.由于括号,当MyCtrl被激活时,这两个动作都将被调用.
在进入Angular之前了解JavaScript的基础知识可能是个好主意,因为Angular假设您对语言的细微差别有了很好的了解.道格拉斯·克罗克福德有一个series of videos可以让你开始.
