将参数从指令传递给 Angularjs 控制器函数 [英] Pass parameter to Angularjs controller function from directive
问题描述
我有一个 AngularJs 指令,它在其隔离范围内创建一个属性和回调函数:
.directive('testButton', [function () {返回 {限制:'A',控制器:'TestDirectiveController 作为 vmDirective',范围: {myCallBack:'&myCallBack',我的变量:'=我的变量'},模板:函数(元素,属性){return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';}};}])
在指令中,一个按钮被点击并执行 onButtonClicked
函数.然后设置一个范围变量并调用 $scope.myCallBack
函数.
callBack 函数被执行并执行以下操作:console.log($scope.linkedVariable);
问题是 $scope.linkedVariable
还没有更新,在那个阶段 $scope.linkedVariable
仍然是之前的值.
当我将上述代码包装在 setTimeout
中时,将检索到正确的值:setTimeout(function(){console.log($scope.linkedVariable)}, 2000);代码>
我的问题是,如何正确地将值传递给 onCallBack
函数.
请参阅下面的完整代码示例:
angular.module('application',[]).directive('testButton', [function () {返回 {限制:'A',控制器:'TestDirectiveController 作为 vmDirective',范围: {myCallBack:'&myCallBack',我的变量:'=我的变量'},模板:函数(元素,属性){return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';}};}]).controller("TestDirectiveController", ['$scope', function($scope){var self = this;self.onButtonClicked = 函数(值){$scope.myVariable = 值;$scope.myCallBack();};}]).controller("TestController", ['$scope', function($scope){var self = this;$scope.linkedVariable = null;self.onCallBack = function(){控制台日志($scope.linkedVariable);setTimeout(function(){console.log($scope.linkedVariable)}, 2000);};}])
HTML:
<div data-test-button="" data-my-call-back="vm.onCallBack()" data-my-variable="linkedVariable"></div>
jsfiddle:http://jsfiddle.net/ff5ck0da/1/
感谢 http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-隔离范围和功能参数.
我现在不再访问控制器中的 $scope.linkedVariable
,而是接受该值作为函数的参数.
为了让它起作用,我必须将 HTML 中的函数声明更改为:
data-my-call-back="vm.onCallBack"
控制器函数声明:
self.onCallBack = function(myVariable){控制台日志(我的变量);};
然后指令可以调用函数,如:
self.onButtonClicked = function(value){$scope.myCallBack()(value);};
请查看更新的 JSFiddle:http://jsfiddle.net/ff5ck0da/9/
I have a AngularJs directive that creates a property and callback function on its isolated scope:
.directive('testButton', [function () {
return {
restrict: 'A',
controller: 'TestDirectiveController as vmDirective',
scope: {
myCallBack:'&myCallBack',
myVariable: '=myVariable'
},
template: function (element, attrs) {
return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';
}
};}])
In the directive a button gets clicked and it executes the onButtonClicked
function. This then sets a scope variable and calls the $scope.myCallBack
function.
The callBack function gets executed and does the following:
console.log($scope.linkedVariable);
The problem is the $scope.linkedVariable
has not yet been updated and at that stage the $scope.linkedVariable
is still the previous value.
When I wrap the above code in a setTimeout
the correct value is retrieved: setTimeout(function(){console.log($scope.linkedVariable)}, 2000);
My Question is, how to properly pass the value to the onCallBack
function.
Please see full code example below:
angular.module('application',[])
.directive('testButton', [function () {
return {
restrict: 'A',
controller: 'TestDirectiveController as vmDirective',
scope: {
myCallBack:'&myCallBack',
myVariable: '=myVariable'
},
template: function (element, attrs) {
return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';
}
};
}])
.controller("TestDirectiveController", ['$scope', function($scope){
var self = this;
self.onButtonClicked = function(value){
$scope.myVariable = value;
$scope.myCallBack();
};
}])
.controller("TestController", ['$scope', function($scope){
var self = this;
$scope.linkedVariable = null;
self.onCallBack = function(){
console.log($scope.linkedVariable);
setTimeout(function(){console.log($scope.linkedVariable)}, 2000);
};
}])
HTML:
<div data-ng-controller="TestController as vm">
<div data-test-button="" data-my-call-back="vm.onCallBack()" data-my-variable="linkedVariable"></div>
</div>
jsfiddle: http://jsfiddle.net/ff5ck0da/1/
I found a more acceptable/correct way of overcoming my problem thanks to http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters.
Instead of accessing the $scope.linkedVariable
in the controller, I now accept the value as a parameter to the function.
To get this to work I had to change the function declaration in the HTML to:
data-my-call-back="vm.onCallBack"
The controller function declaration:
self.onCallBack = function(myVariable){
console.log(myVariable);
};
the directive can then call the function like:
self.onButtonClicked = function(value){
$scope.myCallBack()(value);
};
Please see a updated JSFiddle: http://jsfiddle.net/ff5ck0da/9/
这篇关于将参数从指令传递给 Angularjs 控制器函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!