我在另一个指令中有一个指令。外部指令与控制器共享其范围,而内部指令有自己的范围。我想将控制器的函数引用传递给内部指令,以便可以从那里调用它。但我不知道如何将函数及其参数传递给内部指令,以便它可以正确调用控制器的函数。AngularJs:从另一个指令中的指令调用控制器方法
这里是planker来说明我的问题。
如果您点击“Dir 2 Click me”,则警报显示参数未定义。
我在另一个指令中有一个指令。外部指令与控制器共享其范围,而内部指令有自己的范围。我想将控制器的函数引用传递给内部指令,以便可以从那里调用它。但我不知道如何将函数及其参数传递给内部指令,以便它可以正确调用控制器的函数。AngularJs:从另一个指令中的指令调用控制器方法
这里是planker来说明我的问题。
如果您点击“Dir 2 Click me”,则警报显示参数未定义。
您可以在外部控制器方法通过使用'='
并相应地调整代码...
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.myCtrlMethod = function(msg, b) {
alert(msg + ' and b='+b);
};
})
.directive('dir1', [function(){
return {
restrict: 'E',
replace: true,
template: '<div><p ng-click="myDir1Method(\'my dir1 method\',\'b\')">Dir 1 Click me</p><dir2 my-ctrl-method="myCtrlMethod"></dir2></div>',
link: function(scope, elem, attrs){
scope.myDir1Method = function(msg,b){
scope.myCtrlMethod(msg, b);
};
}
};
}])
.directive('dir2', [function(){
return {
restrict: 'E',
scope: {
myCtrlMethod: '='
},
replace: true,
template: '<p ng-click="myDir2Method(\'my dir2 method\',\'b\')">Dir 2 Click me</p>',
link: function(scope, elem, attrs){
scope.myDir2Method = function(msg,b){
scope.myCtrlMethod(msg, b);
};
}
};
}]);
Plunker :http://plnkr.co/edit/xbSNXaSmzWa3G1GSH6Af?p=preview
编辑:'='
评估th e表达式在父范围的上下文中,其结果绑定到内部范围的属性上。在这个例子中,'myCtrlMethod'是根据父作用域评估的,它从父作用域(一个函数)返回myCtrlMethod
。该函数在内部范围上绑定到myCtrlMethod
,可以用scope.myCtrlMethod(msg, b)
调用。
只要把控制器上的范围:$scope.$b=this;
它似乎并没有为我工作。当我点击“Dir 2 Click me”时,它仍然显示** msg **参数为undefined。 –
你可以使用控制器作为参考,您的指令
你的例子工作正常。但是当我修改jsbin以匹配我的示例时,它停止工作。 http://jsbin.com/caxoheno/2/edit –
试试这个:http://jsbin.com/caxoheno/3/edit, 问题是,它不是全局函数,它是你的控制器范围内的关键。 使用$ scope.yourMethod,或使用Ctrl作为Ctrl并从DOM获取访问权限 – a8m
这是解决我的问题的另一种方法。不幸的是,我不能有两个被接受的答案,第一个答案更适合我。无论如何感谢一堆! –
它确实有用,非常感谢!但我认为'='用于绑定到外部作用域的属性。你可以给出一个简短的解释或提供一个为什么这个作品的链接? –
没问题...绑定变量的不同方法确实令人困惑。更新与解释。 –