从指令中的 link 调用控制器函数
calling a controller function from a link in a directive
我正在编写一个 Angular 1.5.0-beta2 项目。
我想从返回对象的 link 属性 调用控制器函数。
这意味着...
angular.module('myalcoholist').directive("ngFileSelect",function() {
return {
controller: 'AddCoctailController',
controllerAs: 'addCocktail',
link: function ($scope, el) {
el.bind("change", function (e) {
var file = (e.srcElement || e.target).files[0];
/*THIS DOES NOT WORK */ addCocktail.getFile(file);
})
}
}
});
如您所见,我正在尝试 运行 一个名为 getFile 的控制器函数。
有可能吗?
Controller 用于填充 $scope,link 在 controller 之后 运行,因此您可以在 link 函数中访问范围内的任何内容。
angular.module('app', [])
.directive('tstDrv', function () {
return {
restrict: 'E',
template: '<div>{{hello}}</div>',
link: function (scope) {
console.log(scope.hello);
scope.hello = "hello again";
},
controller: function ($scope) {
$scope.hello = 'tst';
}
}
})
这个 SO 问题也相关 Angular: calling controller function inside a directive link function using &
如果要访问在当前指令范围之外定义的范围 属性,则完全取决于 'Domain Definition Object' 的范围 属性。
参考。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance
添加到 Chris 上面的回答 - link 有几个参数(范围、元素、属性、控制器)。您可以访问附加的控制器功能,执行以下操作:
link: function(scope, elem, attrs, ctrl){
ctrl.func_to_call();
}
如果您使用 angular >= 1.3,请使用 bindToController
选项
angular.module('myalcoholist').directive("ngFileSelect",function() {
return {
controller: 'AddCoctailController',
controllerAs: 'addCocktail',
bindToController: true,
link: function (scope, el) {
el.bind("change", function (e) {
var file = (e.srcElement || e.target).files[0];
scope.addCocktail.getFile(file);
});
}
}
});
我正在编写一个 Angular 1.5.0-beta2 项目。
我想从返回对象的 link 属性 调用控制器函数。
这意味着...
angular.module('myalcoholist').directive("ngFileSelect",function() {
return {
controller: 'AddCoctailController',
controllerAs: 'addCocktail',
link: function ($scope, el) {
el.bind("change", function (e) {
var file = (e.srcElement || e.target).files[0];
/*THIS DOES NOT WORK */ addCocktail.getFile(file);
})
}
}
});
如您所见,我正在尝试 运行 一个名为 getFile 的控制器函数。
有可能吗?
Controller 用于填充 $scope,link 在 controller 之后 运行,因此您可以在 link 函数中访问范围内的任何内容。
angular.module('app', [])
.directive('tstDrv', function () {
return {
restrict: 'E',
template: '<div>{{hello}}</div>',
link: function (scope) {
console.log(scope.hello);
scope.hello = "hello again";
},
controller: function ($scope) {
$scope.hello = 'tst';
}
}
})
这个 SO 问题也相关 Angular: calling controller function inside a directive link function using &
如果要访问在当前指令范围之外定义的范围 属性,则完全取决于 'Domain Definition Object' 的范围 属性。
参考。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance
添加到 Chris 上面的回答 - link 有几个参数(范围、元素、属性、控制器)。您可以访问附加的控制器功能,执行以下操作:
link: function(scope, elem, attrs, ctrl){
ctrl.func_to_call();
}
如果您使用 angular >= 1.3,请使用 bindToController
选项
angular.module('myalcoholist').directive("ngFileSelect",function() {
return {
controller: 'AddCoctailController',
controllerAs: 'addCocktail',
bindToController: true,
link: function (scope, el) {
el.bind("change", function (e) {
var file = (e.srcElement || e.target).files[0];
scope.addCocktail.getFile(file);
});
}
}
});