是否可以在可以从控制器调用的指令中创建函数。看起来应该是这样的:
HTML:
<div myDir id='myDir'>My dir</div>
<button ng-click="clickme()">click me</button>
JS:
app.directive("myDir", function(){
return function(){
var dirFunction = function(){
alert("hello world");
}
}
}
app.controller("Control", function($scope){
$scope.clickme = function(){
angular.element('#myDir').dirFunction();
}
}
答案 0 :(得分:2)
首先在您的HTML更改myDir
到my-dir
。在你的情况下,你不需要给你的div id
:
<div my-dir>My dir</div>
<button ng-click="clickme()">click me</button>
现在将dirFunction
公开给范围。这将使您的控制器可以访问此功能:
app.directive("myDir", function(){
return function(scope){
scope.dirFunction = function(){
alert("hello world");
}
}
});
在控制器中,只需将其称为$scope.dirFunction()
:
app.controller("Control", function($scope){
$scope.clickme = function(){
$scope.dirFunction();
}
});
注意:你不应该在你的控制器中进行DOM操作:控制器中的angular.element('#myDir').dirFunction();
是一种在angularjs中编码的坏方法。保存此指令。
答案 1 :(得分:0)
只是想用一个解决方案来更新它:这里是Plunk - http://plnkr.co/edit/m2YKLGGLv88jNkkgAYPp?p=preview
基本上我使用Array中的范围变量从上面的CodeZilla扩展了解决方案。
$scope.func = [];
然后,在指令属性functionname。
中传递要调用的函数的名称<div mydir name="dir1" functionname="sayhello1">Directive dir1</div>
然后将从指令调用的函数添加到控制器:
$scope.callDir1 = function (){
$scope.func['sayhello1']();
}
$scope.callDir2 = function (){
$scope.func['sayhello2']();
}
在指令本身中,我们使用compile在指令中创建将从控制器调用的函数。
app.directive('mydir', function () {
return {
scope: true,
compile: function (tElement, tAttrs, transclude) {
return function postLink(scope, iElement, iAttrs, controller) {
scope.$parent.func[iAttrs.functionname] = function (){
alert("update something in " + iAttrs.name);
}
}
}
}
});
或者,您可以使用链接功能 - 它的工作原理相同:
app.directive('mydir', function () {
return {
scope: true,
link: function (scope, element, attrs) {
scope.$parent.func[attrs.functionname] = function () {
console.debug("update something in " + attrs.name);
}
}
}
});
那就是它。