处理Angular中Accordion的开放/崩溃事件

Question

如果我有这个代码:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
</accordion-group>

使用AngularJS,angular-ui和Twitter Bootstrap,是否可以在打开时让手风琴调用一些动作？我知道我不能简单地添加ng-click,因为它已经被"编译"为HTML以用于打开/折叠组.

Answer 1

手风琴组还允许使用手风琴标题指令,而不是将其作为属性提供.您可以使用它,然后使用ng-click将标题包装在另一个标记中.

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
  <accordion-heading>
    <span ng-click="opened(group, $index)">{{group.content}}</span>
  </accordion-heading>
</accordion-group>

示例:http://plnkr.co/edit/B3LC1X？p = preview

Answer 2

这是基于pkozlowski.opensource解决方案的解决方案.您可以使用动态定义的Property,
而不是在集合的每个项目上添加$ watch.在这里,你可以将绑定IsOpened的财产组的IS-打开属性.

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.IsOpened">
   {{group.content}}
</accordion-group>

因此,您可以在控制器中的集合的每个项目上动态添加IsOpened属性:

$scope.groups.forEach(function(item) {
  var isOpened = false;
  Object.defineProperty(item, "IsOpened", {
    get: function() {
      return isOpened;
    },
    set: function(newValue) {
      isOpened = newValue;
      if (isOpened) {
        console.log(item); // do something...
      }
    }
  });
});

使用属性而不是手表更适合表演.

Answer 3

is-openaccordion-group上有一个属性,它指向一个可绑定的表达式.当给定的手风琴组打开时,您可以观看此表达式并执行某些逻辑.使用此技术,您可以将标记更改为:

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
   {{group.content}}
</accordion-group>

这样您就可以在控制器中准备所需的监视表达式:

$scope.$watch('groups[0].open', function(isOpen){
    if (isOpen) {
      console.log('First group was opened'); 
    }    
  });

虽然上述工作在实践中使用可能有点麻烦,所以如果你觉得这可以改进,请打开https://github.com/angular-ui/bootstrap中的问题