AngularJS-传递函数到指令

我有一个例子 angularJS

<div ng-controller="testCtrl">


<test color1="color1" updateFn="updateFn()"></test>
</div>
<script>
angular.module('dr', [])
.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function() {
alert('123');
}
})
.directive('test', function() {
return {
restrict: 'E',
scope: {color1: '=',
updateFn: '&'},
template: "<button ng-click='updateFn()'>Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});


</script>
</body>


</html>

我想当我点击按钮，警报框将出现，但没有显示。

有人能帮我吗？

152795 次浏览
小开

要从隔离作用域指令内部调用父作用域中的控制器函数，可以像 OP 说的那样在 HTML 中使用 dash-separated属性名称。

另外，如果你想给函数发送一个参数，可以通过传递一个对象来调用函数:

<test color1="color1" update-fn="updateFn(msg)"></test>

JS

var app = angular.module('dr', []);


app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});


app.directive('test', function() {
return {
restrict: 'E',
scope: {
color1: '=',
updateFn: '&'
},
// object is passed while making the call
template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});

Fiddle

小开

在“ test”指令 Html 标记中，函数 不应该的属性名称为 camelCased，但是基于破折号。

所以，不要:

<test color1="color1" updateFn="updateFn()"></test>

写道:

<test color1="color1" update-fn="updateFn()"></test>

这是 angle 用来区分指令属性(比如 update-fn 函数)和函数的方法。

小开

也许我遗漏了一些东西，但是尽管其他解决方案确实调用了父范围函数，但是没有能力从指令代码传递参数，这是因为 update-fn使用固定的参数调用 updateFn()，例如 {msg: "Hello World"}。稍微修改一下就可以让指令传递参数，我认为这样更有用。

<test color1="color1" update-fn="updateFn"></test>

注意，HTML 传递的是一个函数引用，也就是说，没有 ()括号。

JS

var app = angular.module('dr', []);


app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});


app.directive('test', function() {
return {
restrict: 'E',
scope: {
color1: '=',
updateFn: '&'
},
// object is passed while making the call
template: "<button ng-click='callUpdate()'>
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
scope.callUpdate = function() {
scope.updateFn()("Directive Args");
}
}
}
});

因此，在上面的代码中，HTML 调用本地作用域 callUpdate函数，然后从父作用域“获取”updateFn，并使用指令可以生成的参数调用返回的函数。

Http://jsfiddle.net/mygknek2/

小开

使用破折号和小写的属性名称(如其他答案所说) :

 <test color1="color1" update-fn="updateFn()"></test>

在指令范围中使用“ =”代替“ &”:

 scope: { updateFn: '='}

然后，您可以像使用其他函数一样使用 updateFn:

 <button ng-click='updateFn()'>Click</button>

这就对了！

小开

用 双向绑定双向绑定传递控制器函数怎么样？然后，您可以在指令中使用它，其方式与在常规模板中完全相同(为简单起见，我删除了不相关的部分) :

<div ng-controller="testCtrl">


<!-- pass the function with no arguments -->
<test color1="color1" update-fn="updateFn"></test>
</div>


<script>
angular.module('dr', [])
.controller("testCtrl", function($scope) {
$scope.updateFn = function(msg) {
alert(msg);
}
})
.directive('test', function() {
return {
scope: {
updateFn: '=' // '=' bidirectional binding
},
template: "<button ng-click='updateFn(1337)'>Click</button>"
}
});
</script>

我着陆在这个问题上，因为我尝试了上述方法，但不知何故，它不工作。现在一切正常。

小开

我不得不使用“ =”绑定而不是“ &”，因为它不起作用。 奇怪的行为。

小开

@ JorgeGRC 谢谢你的回答。不过有一点，“也许”这个词非常重要。如果你有参数，你必须把它/他们也包括在你的模板，并确保指定你的 当地人，例如 updateFn({msg: "Directive Args"}。


提交答案