大佬教程收集整理的这篇文章主要介绍了angularjs – 如何从指令部分调用ng-click？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
小提琴在那里：http://jsfiddle.net/stephanedeluca/QRZFs/13/
不幸的是,由于我将代码移动到指令中,因此ng-click不再触发.
控制器和指令如下：
var app = angular.module('myApp',['ngSanitize']);
app.directive('plantStages',function ($compilE) {
return {
reStrict: 'E',transclude: true,template: '<figure class="cornStages">\
<p ng-transclude style="color: skyblue"></p>\
<hr/>\
<p ng-bind-html="title"></p>\
<p ng-bind-html="subtitle">{{subtitlE}}</p>\
<ul>\
<li ng-repeat="stage in stages" ng-click="changePage(stagE)">{{stagE}}</li>\
</ul>\
</figure>',scope: {
stages:"=",title:'@'
},link: function (scope,element,attrs,ctrl,transcludE) {
if (!attrs.titlE) scope.title = "Default title";
}
};
});
app.controller('myCtrl',function ($scope,$LOCATIOn,$http) {
$scope.stages = ['floraison','montaison'];
$scope.changePage = function (pagE) {
var url = "corn.page.html#/"+page;
console.log("Change page "+page+" with url "+url);
alert("about to change page as follows: document.LOCATIOn.href = "+url);
};
});
@L_675_6@它的html如下：
<div ng-controller="myCtrl">
Stages,<p ng-repeat="stage in stages">{{stagE}}</p>
<hr/>
Plant stages
<plant-stages
title="<b>Exploration<br/>du cycle</b>"
subtitle="<em>This is a<br/>sub title</em>"
stages="stages"
>
Inner<br/>directive
</plant-stages>
</div>
任何的想法？
选项1：
选项1是最简单的选择.然而,这很像一个解决方法,我不建议广泛使用它.您可以从传递给链接功能的元素获取控制器的范围,并在那里@L_675_6@changePage：
link: function (scope,transcludE) { if (!attrs.titlE) scope.title = "Default title"; scope.changePage = element.scope().changePage; // <= Get parent scope from element,it will have changePage() }
选项2：
如果您没有任何涉及在外部控制器中定义范围的逻辑(如您的示例中所示),则可以为您的指令定义内部控制器并在那里执行：
app.directive('plantStages',function ($compilE) {
return {
...
controller: ['$scope',function($scopE) {
$scope.changePage = function(pagE) {
var url = "corn.page.html#/"+page;
console.log("Change page "+page+" with url "+url);
alert("about to change page as follows: document.LOCATIOn.href = "+url);
}
}]
};
});
选项3：
如果你想在不同的指令和控制器中重用changePage()中定义的逻辑,最好的方法是将逻辑移动到可能注入到控制器和指令的某个服务：
app.service('changePageservice',function() { this.changePage = function(pagE) { var url = "corn.page.html#/"+page; console.log("Change page "+page+" with url "+url); alert("about to change page as follows: document.LOCATIOn.href = "+url); } }); app.controller('myCtrl',$http,changePageservicE) { ... changePageservice.changePage('page'); ... }); app.directive('plantStages',function ($compilE) { ... controller: ['$scope','changePageservice',function($scope,changePageservicE) { $scope.changePage = changePageservice.changePage; }] ... });
选项4：
您可以将一些代码(如changePage(页面))作为指令的某些属性的值传递,并将指令定义范围属性传递给’&’这将创建一个函数,该函数将在外部控制器的作用域中执行,并且参数传递给该函数.例：
JavaScript的
app.directive('plantStages',template: '<figure class="cornStages">\
<p ng-transclude style="color: skyblue"></p>\
<hr/>\
<p ng-bind-html="title"></p>\
<p ng-bind-html="subtitle"></p>\
<ul>\
<li ng-repeat="stage in stages" ng-click="changePage({page: stagE})">{{stagE}}</li>\
</ul>\
</figure>',title:'@',changePage:'&'
},transcludE) {
if (!attrs.titlE) scope.title = "Default title";
}
};
});
HTML
<div ng-controller="myCtrl">
Stages,<p ng-repeat="stage in stages">{{stagE}}</p>
<hr/>
Plant stages
<plant-stages
title="<b>Exploration<br/>du cycle</b>"
subtitle="<em>This is a<br/>sub title</em>"
stages="stages"
change-page="changePage(pagE)"
>
Inner<br/>directive
</plant-stages>
以上是大佬教程为你收集整理的angularjs – 如何从指令部分调用ng-click？全部内容，希望文章能够帮你解决angularjs – 如何从指令部分调用ng-click？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。