将事件处理程序添加到transclusion内容的正确方法是什么?我不希望我的指令的使用者将自己的点击处理程序添加到文档中。该指令应该处理它。但我不知道如何正确地将处理程序添加到通过ng-transclude传递的内容。将事件处理程序添加到AngularJS transclusion content
摆弄:https://jsfiddle.net/hoe71p0e/12/(不能得到Angular.js和的jsfiddle工作;我的链接功能不会被调用)
foo.html
<my-foo>
<button type="button">Foo</button>
</my-foo>
FOO .js
return {
template: "<div class='my-foo' data-ng-transclude></div>"
link: function($scope, $elem, $attrs, $ctrl, $transclude) {
$scope.foo = function() {
console.log("this is never called");
};
$transclude(function(clone) {
for (var i in clone) {
if (clone[i].localName === "button") {
angular.element(clone[i]).attr("data-ng-click", "foo()");
}
}
});
}
};
预期的结果(点击按钮应调用foo)
<div class="my-foo">
<button type="button" data-ng-click="foo()">Foo</button>
</div>
实际结果(点击按钮,什么都不做)
<div class="my-foo">
<button type="button">Foo</button>
</div>
通知,按钮上的data-ng-click
属性丢失。
而且,我已经看到了几个例子有这样的事情...
broken.js
$transclude(function(clone) {
angular.element(clone).find("button");
});
...但这些失败,因为.find()
没有与结果回来了,即使检查员似乎认为克隆包含“按钮”。
这不是很明显的你正试图在这里完成的。你试图达成的目标是什么?我不确定我是否遇到过以这种方式增加其他内容的指令。 – Claies
我在想OP只是想在一个transcluded指令中调用他的'ng-click'事件,并且正在解释他们到目前为止所尝试的内容 – scniro
我已经添加了一个注释来解释我不希望我的指令的使用者被要求编写点击处理程序来使指令工作。基本上,我的指令应该有一个必需的“按钮”子,但指令需要处理按钮的点击行为;消费者不应该负责。 –