Question

我正在使用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％并设置显示：块。我还考虑完全删除填充，但我想知道是否有比黑客攻击更好的方法。

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

我的整个代码：

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

Answer 1

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

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

Answer 3

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

items = Items.first(3) # and items.first(3).reverse still passes as well :(
assert_equals [items[0], items[1], items[2]], items

div元素中的

-

ASC

这应该是神奇的。以下对我有用 -

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

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

Answer 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（）。

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

4 个答案: