twitter-bootstrap 将 ng-click 事件添加到 angular-ui 手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18394995/
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
Add ng-click event to angular-ui accordion
提问by robert king
I'm using angular-uiand have started using accordions.
我正在使用angular-ui并开始使用手风琴。
I need to fire an ng-clickevent when someone opens or closes an accordion group.
ng-click当有人打开或关闭手风琴组时，我需要触发一个事件。
I did some research and found this thread: angular-ui issue
我做了一些研究，发现了这个线程：angular-ui issue
It linked to a plunkerwhich shows a solution which isn't satisfactory for my use case.
它链接到一个plunker，该plunker显示了一个对我的用例不满意的解决方案。
Here is the solutions html:
这是解决方案html：
<accordion>
<accordion-group>
<accordion-heading>
<span ng-click="foo()">Try clicking me!</span>
</accordion-heading>
Some Body 3
</accordion-group>
</accordion>
However the ng-click event only fires if you click on the span text. If you click just outside of the text the accordion still opens or closes without any click event.
但是ng-click 事件仅在您单击 span text 时才会触发。如果您在文本外单击，手风琴仍会在没有任何单击事件的情况下打开或关闭。
To fix this I tried making the spans width & height 100% and setting display: block. I also considered removing the padding entirely but I was wondering if there is a better way than hacking at it.
为了解决这个问题，我尝试将跨度宽度和高度设为 100% 并设置 display: block。我也考虑过完全删除填充，但我想知道是否有比 hack 更好的方法。
Does anyone know how to attach the ng-click event to the entire accordian group? Or how to make the span fill the entire group?
有谁知道如何将 ng-click 事件附加到整个手风琴组？或者如何让span填满整个组？
My entire code:
我的整个代码：
<accordion close-others="true">
<accordion-group ng-repeat="question in level">
<accordion-heading style="padding: 0">
<div style="display: block; margin: 0px" ng-click="set_question(question.title)">{{ question.title }}</div>
<i class="icon-check" ng-show="has_solved_all"></i>
</accordion-heading>
<span ng-bind-html-unsafe="question.content"></span>
</accordion-group>
</accordion>
<br>
Question Open: {{ question_open }}
采纳答案by 0xc0de
Why do you need ng-clickspecific solution? There is an is-openattribute which you can watch for, and which triggers on opening/closing of an accordion.
为什么需要ng-click特定的解决方案？有一个is-open您可以观察的属性，它会在打开/关闭手风琴时触发。
回答by milkyway
Create a top level div under accordion heading or move
在手风琴标题下创建一个顶级 div 或移动
<i class="icon-check" ng-show="has_solved_all"></i>
inside the div element -
在 div 元素内 -
<div style="display: block; margin: 0px"
This should do the magic. Below works for me-
这应该会变魔术。以下对我有用-
<accordion-group ng-repeat="group in groups" >
<accordion-heading>
<div ng-click="opened(group, $index)">
<span>{{group.title}}</span>
</div>
</accordion-heading>
{{group.content}}
</accordion-group>
Modify and verify in the plunker http://plnkr.co/edit/B3LC1X?p=previewconsole log. I know the question is old but others can use this answer.
在 plunker http://plnkr.co/edit/B3LC1X?p=preview控制台日志中修改和验证。我知道这个问题很老，但其他人可以使用这个答案。
回答by haya
If you entend to add another click with the one existe of the the open event. I suggest to add the directive bellow inside the tag:
如果您打算使用打开事件的一个存在添加另一个点击。我建议在标签内添加下面的指令：
myApp.directive('functionClick',function(){
return{
restrict: 'E',
terminal: true,
controller: 'NameOfController',
templateUrl: "templateFunctionClick.html",
link: function($scope, $element, $attrs, $ctrl){
}
}
});
<accordion-group is-open="status.open">
<accordion-heading >
{{headerName}}
<function-click></function-click>
</accordion-heading>
</accordion-group>
Where the templateFunctionClick.html:
其中 templateFunctionClick.html：
<a ng-click="$event.stopPropagation();clickMeFunction()" ><span>Click Me!</span> </a>
be sure to add $event.stopPropagation(); in order to don't call in same time the click of toggelOpen().
一定要添加 $event.stopPropagation(); 为了不同时调用 toggelOpen() 的点击。
