将ng-click事件添加到angular ui手风琴中

Add ng-click event to angular-ui accordion

本文关键字：ui 手风琴 angular ng-click 事件 添加      更新时间：2023-09-26

我正在使用angular ui，并且已经开始使用手风琴。

当有人打开或关闭手风琴组时，我需要启动ng-click活动。

我做了一些研究，发现了这个线索：angular ui问题

它链接到一个plunker，它显示了一个对我的用例不满意的解决方案。

以下是解决方案html:

<accordion>
  <accordion-group>
      <accordion-heading>
          <span ng-click="foo()">Try clicking me!</span>
      </accordion-heading>
      Some Body 3
  </accordion-group>
</accordion>

但是只有当您单击span text时才会触发ng-click事件。如果您在文本之外单击，手风琴仍然会打开或关闭，而不会发生任何单击事件。

为了解决这个问题，我尝试使跨度宽度&高度100%，设置显示：块。我也考虑过完全去掉填充物，但我想知道是否有比破解更好的方法

有人知道如何将点击事件附加到整个手风琴小组中吗？或者如何使跨度充满整个组？

我的全部代码：

  <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 }}

为什么需要ng-click特定的解决方案？有一个is-open属性，您可以查看它，它在手风琴打开/关闭时触发。

如果您正在使用Angular的新版本，一个名为isOpenChange的事件，请处理它。

<accordion>
  <accordion-group (isOpenChange)="foo()">
   <button class="btn btn-link btn-block clearfix" accordion-heading type="button">
    <div class="pull-left float-left">Header Title</div>
   </button>
   <div>Some Body 3</div>
 </accordion-group>
</accordion>

在手风琴标题下创建一个顶级div或移动

<i class="icon-check" ng-show="has_solved_all"></i>

div元素内部-

<div style="display: block; margin: 0px"

这应该很神奇。以下适用于我-

<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>

在plunker中修改和验证http://plnkr.co/edit/B3LC1X?p=preview控制台日志。我知道这个问题很老，但其他人可以用这个答案。

若您想添加另一个打开事件的点击。我建议在标签中添加以下指令：

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>

其中模板FunctionClick.html：

<a ng-click="$event.stopPropagation();clickMeFunction()" ><span>Click Me!</span> </a>

请确保添加$event.stopPropagation（）；为了不同时调用toggleOpen（）。

相关文章：