我正在尝试动态生成表单输入和基于模型的关联动作菜单.我可以传递要使用的字段和菜单,但是我无法弄清楚如何配置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/
原文链接:https://www.f2er.com/angularjs/140622.html有很多问题.
>你的打字错误为$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可以让你开始.