大佬教程收集整理的这篇文章主要介绍了如何在AngularJS指令模板中动态定义要使用ng点击调用的函数,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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}}"
有很多问题.
>你的打字错误为$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可以让你开始.
以上是大佬教程为你收集整理的如何在AngularJS指令模板中动态定义要使用ng点击调用的函数全部内容,希望文章能够帮你解决如何在AngularJS指令模板中动态定义要使用ng点击调用的函数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。