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

Posted 2023-03-05

【中文标题】将 ng-click 事件添加到 angular-ui 手风琴

【英文标题】：Add ng-click event to angular-ui accordion

【发布时间】：2013-08-26 01:01:22

【问题描述】：

我正在使用angular-ui 并开始使用手风琴。

当有人打开或关闭手风琴组时，我需要触发 ng-click 事件。

我做了一些研究，发现了这个帖子：angular-ui issue

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

这里是解决方案html：

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

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

为了解决这个问题，我尝试将跨度宽度和高度设置为 100% 并设置 display: block。 我也考虑过完全移除填充，但我想知道是否有比破解它更好的方法。

有谁知道如何将 ng-click 事件附加到整个手风琴组？或者如何让 span 填满整个组？

我的整个代码：

  <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 

【问题讨论】：

Handle open/collapse events of Accordion in Angular的可能重复

【参考方案1】：

为什么需要ng-click具体解决方案？有一个 is-open 属性可供您观察，它会在手风琴的打开/关闭时触发。

【讨论】：

也许我可以使用 is-open。我现在正在搜索文档。我的问题更具体地说是我有一个 ng-repeat="question in questions"。每个问题都以手风琴的形式展开。然后在页面底部显示您正在查看的问题。

哎呀 - 看起来很相似。无论如何 - 我认为我们可以将此问题标记为重复。

使用 $watch 是不是个好主意。由于 Angular 不鼓励使用 $watch。因为我们正在干扰摘要循环。

【参考方案2】：

如果您使用的是新版本的 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>

【参考方案3】：

在手风琴标题下创建*** 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 控制台日志。 我知道这个问题很老，但其他人可以使用这个答案。

【参考方案4】：

如果您打算在打开事件的现有单击中添加另一个单击。我建议在标签内添加下面的指令：

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>

templateFunctionClick.html 所在：

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

一定要添加 $event.stopPropagation();为了不同时调用toggelOpen()的点击。