我想知道当单击 div 的一部分时,我是否能够在指令中调用绑定(bind)函数。我目前有一个 div,里面有另一个 div,用作展开 div 的按钮。大 div 有一个使其可扩展的指令。我想单击 div Angular 上的箭头,并让箭头的 ng-click 调用可扩展指令内的绑定(bind)函数。这可能吗?如果可以,我该如何实现?
这是 div 的图片:
<div expandable class="boxWithBorderStyle">
<div class="arrowStyle" ng-click="someFuncInsideExpandableDirective()"> </div>
</div>
最佳答案
如果指令使用隔离范围(范围:{}
),则托管指令的元素的内容(即子元素)与指令的范围不同,我怀疑这就是您的范围有。
为了将内容链接到同一范围,您需要手动嵌入它们:
.directive("expandable", function(){
return {
transclude: true,
scope: {
// whatever you have now
},
link: function(scope, element, attrs, ctrls, transcludeFn){
transcludeFn(scope, function(contentClone){
element.append(contentClone);
});
// here you can expose whatever functions you want on the isolate scope:
scope.someFuncInsideExpandableDirective = function(){
// do something
}
}
};
});
嵌入函数 transcludeFn
的第一个参数是嵌入内容所链接的范围,在本例中是指令的范围。
但请记住,从指令用户的 Angular 来看,这有点尴尬,因为现在他们有 HTML 引用一些“神奇”变量/函数(当然是由你的指令)对于观察 HTML 的人来说并不明显。想象一下,您会遇到一些执行类似操作的指令 foo
:
<div foo="abc">
{{foobar}}
<button ng-click="doSomethingFoo()">do foo</button>
</div>
和 foobar
和 doSomethingFoo
是在 foo
指令的范围内定义的 - 如果不知 Prop 体细节,则很难破译foo
发生了什么事。
关于javascript - 从 ng-click 调用指令内的绑定(bind)函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30598059/