Angular UI手风琴

时间:2014-04-01 20:33:23

标签: javascript angularjs angular-ui angular-ui-bootstrap

我正在尝试了解如何观看Angular UI的手风琴is-open事件,以便在我的任何手风琴关闭时都可以回电话。

这是我手风琴的基本结构(只是为了展示一个。) 需要注意的是,这些实际上是静态内容,而不是动态内容。

<accordion-group is-open="true">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>

我的控制器

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

Heres a demo 我正在让console.log在加载时发射一次,但是当我关闭任何其他手风琴时不会。 有任何想法吗?任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:1)

我假设你找到了代码here。这对您不起作用,因为您没有使用ng-repeat来制作您的手风琴。而是绑定到is-open属性:

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
$scope.oneAtATime = true;    
$scope.first = {
  open: true
}
  $scope.$watch('first.open', function (isOpen) {      
    console.log('First group was toggled');    
  }); 
}

相关HTML:

 <accordion-group is-open="first.open">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>  

Plunk

答案 1 :(得分:0)

为什么不使用ng-click事件?在“点击”事件上绑定您的功能显然比观看它更好。所以,如果你能避免它..