javascript 从带有参数的指令调用控制器函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16135711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call a controller function from directive with parameters
提问by JohnCastle
How can a directive call a function from a controller with some parameters ?
指令如何从具有某些参数的控制器调用函数？
I would to give the variable myVar to the scope.$apply(attrs.whattodo);
我想把变量 myVar 赋予范围。$apply(attrs.whattodo);
HTML :
HTML :
<div ng-app="component">
<div ng-controller="ctrl">
<span ng-repeat="i in myarray">
<span customattr whattodo="addVal">{{i}}</span>
</span>
</div>
Controller JS :
控制器JS：
function ctrl($scope) {
$scope.myarray = [1];
$scope.addVal = function (value) {
$scope.myarray.push(value);
}
}
Directive JS :
指令JS：
angular.module('component', []).directive('customattr', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var myVar = 5;
scope.$apply(attrs.whattodo);
}
};
});
采纳答案by Maksym
Here is one of the working methods:
这是其中一种工作方法：
You have to bind this attribute in scope as a scope model with function type. So you can execute this when you need in other (directive) sope
您必须在作用域中将此属性绑定为具有函数类型的作用域模型。因此，您可以在其他（指令）sope 中需要时执行此操作
HTML
HTML
<body ng-controller="MainCtrl">
Value: {{value}}!
<button customattr whattodo="addValue">Add</button>
</body>
JS
JS
angular.module('component', [])
.controller('MainCtrl', function($scope) {
$scope.value = 1;
$scope.addValue = function(val){
alert(val);
$scope.value = val;
}
});
.directive('customattr', function () {
return {
restrict: 'A',
scope: {
whattodo: "=" // or ' someOtherScopeName: "=whattodo" '
},
link: function (scope, element, attrs) {
var myVar = 5;
scope.whattodo(myVar); // or ' scope.someOtherScopeName(myVar) '
}
};
});
Here is code on plunker
= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel
= 或 =attr - 在本地范围属性和通过 attr 属性值定义的 name 的父范围属性之间设置双向绑定。如果未指定属性名称，则假定属性名称与本地名称相同。给定范围和小部件定义：{ localModel:'=myAttr' }，那么小部件范围属性 localModel 将反映父范围上 parentModel 的值。parentModel 的任何更改都将反映在 localModel 中，localModel 中的任何更改都将反映在 parentModel 中
回答by Ketan
in html
在 html 中
whattodo="addVal(value)"
in directive
在指令中
scope.$apply(function(s){
s.whattodo({value : myVar});
});
回答by Julia Usanova
Why don't you use the "&" sign in isolated scope?
为什么不在隔离范围内使用“&”符号？
<body ng-controller="MainCtrl">
Value: {{value}}!
<button customattr add-val="addValue(value)">Add</button>
</body>
In controller:
在控制器中：
function ctrl($scope) {
$scope.myarray = [1];
$scope.addValue = function (value) {
$scope.myarray.push(value);
}
}
And in directive:
并在指令中：
angular.module('component', []).directive('customattr', function () {
return {
restrict: 'A',
scope: {
addVal: "&"
},
controller: function ($scope) {
var myVar = 5;
// To execute addVal in controller with 'value' param
$scope.addVal({value: value})
}
};
});
