angular-ui bootstrap手风琴：我如何正确$ $观看is-open属性？

I'm trying to perform an action when a specific accordion-section is openend. My use-case is almost identical to this question here, only I'm using statically defined 's instead of ng-each.

我正在尝试在特定的手风琴节开始时执行动作。我的用例几乎与这个问题相同,只是我使用的是静态定义的而不是ng-each。

Somehow I can't get the $watch to fire when the is-open state changes, can anybody tell me why this doesn't work:

不知何故,当打开状态发生变化时,我无法触发$ watch,任何人都可以告诉我为什么这不起作用:

View:

  <accordion close-others="false">
   <accordion-group heading="group1" is-open="acc1open">
    content 1
   </accordion-group>    
   <accordion-group heading="group2" is-open="acc2open">
    content 2
   </accordion-group>  
  </accordion>

Controller:

  $scope.acc1open = false;
  $scope.acc2open = true;

  $scope.$watch('acc1open', function(){
      console.log("watch acc1:" +$scope.acc1open);
  }, true);

Here's a plunker:

这是一个吸烟者:

http://plnkr.co/edit/Ycms81?p=preview

It prints "watch acc1:false" a single time when the page is loaded, but nothing when the accordion group is opened.

它在页面加载时一次打印“watch acc1:false”,但在打开手风琴组时没有打印。

2 个解决方案

#1

I added a <span> inside the AccordionDemoCtrl div and changed the is-open to bind to $parent.acc1open

我在AccordionDemoCtrl div中添加了一个并更改了is-open以绑定到$ parent.acc1open

<accordion-group heading="group1" is-open="$parent.acc1open">

...

<span ng-click="acc1open = true">Click me to open group 1</span>

Directives have their own scope, and the variables are their own.

指令有自己的范围,变量是自己的。

#2

Along with the plunker: plnkr.co/edit/1lnbTa?p=preview

与plunker一起:plnkr.co/edit/1lnbTa?p=preview

I found this worked for an array:

我发现这适用于一个数组:

$scope.array = [object1,object2,object3,object4];
$scope.isOpen = [false,false,false,false];
$scope.$watch('isOpen', function() {
  console.log("watch isOpen:" + $scope.isOpen);
}, true);

HTML(JADE)

accordion-group(ng-repeat='object in array',is-open="$parent.isOpen[$index]")
  accordion-heading
    h4 My Heading {{$index}}
  p My content {{$index}}

#1