javascript 指令的内部模板中的 ng-click 不提供该功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14255929/
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
ng-click in the inner template of the directive is not providing the functionality
提问by user1966260
ng-clickis not providing alert. When the inner template of the directive is clicked alert box is not shown.
ng-click不提供警报。单击指令的内部模板时，不显示警报框。
The fiddle link is here: http://jsfiddle.net/NNDhX/
小提琴链接在这里：http: //jsfiddle.net/NNDhX/
回答by Valentyn Shybanov
Your directive has its own isolated scope. So function 'hi' should be inside directive's scope. If you want to pass your controller's function you should do binding, like scope: { ..., hi: '&' }and then <you-directive hi='hi' ..>. Here is a link to documentation about this: Understanding Transclusion and Scopes.
你的指令有它自己独立的作用域。所以函数 'hi' 应该在指令的范围内。如果你想传递你的控制器的功能，你应该做绑定，比如scope: { ..., hi: '&' }然后<you-directive hi='hi' ..>。这是有关此文档的链接：Understanding Transclusion and Scopes。
So just adding it in linking function is enough:
所以只需在链接函数中添加它就足够了：
link: function(scope, element, attrs) {
scope.hi = function() { alert("hi"); }
Here is updated fiddle: http://jsfiddle.net/GwBAh/
这是更新的小提琴：http: //jsfiddle.net/GwBAh/
回答by Christopher Giba?a
I don't know if this is the best way but you can use $parent in directive to access parent scope.
我不知道这是否是最好的方法，但您可以在指令中使用 $parent 来访问父作用域。
<a ng-click="$parent.hi();">parent</a>
Here is link to full fiddle example: http://jsfiddle.net/EKDse/
这是完整小提琴示例的链接：http: //jsfiddle.net/EKDse/
回答by bmleite
The whole idea of isolate scopes is exactly to avoid 'sharing' things between parent<->child scopes, somehow protecting them from being exposed and (unintentionally) changed by other directives/controllers.
隔离作用域的整个想法正是为了避免在父<->子作用域之间“共享”事物，以某种方式保护它们不被其他指令/控制器暴露和（无意）更改。
If you really want to avoid the isolate scope and share the parent's scope, try this:
如果您真的想避免隔离范围并共享父范围，请尝试以下操作：
Start by removing the directive's scope definition (commented below):
首先删除指令的范围定义（下面有注释）：
transclude: true,
/*scope: { title:'@zippyTitle' },*/
Then place the attributes (attrs) from the directive element on the directives' scope:
然后将attrs指令元素中的属性 ( ) 放在指令的作用域上：
scope.attrs = attrs;
Note: By doing this the attrsproperty will also be available on the parent (Ctrl3) scope.
注意：通过这样做，该attrs属性也将在父 (Ctrl3) 范围内可用。
And finally define the title based on the scope.attrs
最后根据标题定义标题 scope.attrs
template: '<div>' +
'<div class="title">{{attrs.zippyTitle}}</div>' +
'<div class="body" ng-transclude></div>' +
'<a ng-click="hi();">hi</a>' +
'</div>',
jsFiddle: http://jsfiddle.net/NNDhX/1/
jsFiddle：http: //jsfiddle.net/NNDhX/1/
回答by pdorgambide
Controller function inside a directive must be called within the transcluded block. Using the controller method inside the template of the directive make your directive depends on controller and is a undesirable design by its depedencies (directive-outer controller).
指令内的控制器函数必须在嵌入块内调用。使用指令模板内的控制器方法使您的指令依赖于控制器，并且由于其依赖项（指令-外部控制器）是一种不受欢迎的设计。
In your sample traslate the <a>piece of code to the transcluded block. It made your directive more isolated and solved the problem:
在您的示例中，将这段<a>代码转换为嵌入块。它使您的指令更加孤立并解决了问题：
<div class="zippy" zippy-title="Details: {{title}}...">
{{text}}
<a ng-click="hi();">hi</a>
</div>
