Updated Fiddle

Question

我使用Angular Bootstrap将accordion放在标签内，但我无法处理手风琴窗格的展开事件。这是小提琴：http://jsfiddle.net/vruqw9s8/

 $(function () {
    $('accordion').on('show.bs.collapse', function () {
              alert('accordion change');
    });
});

Answer 1

Updated Fiddle

UI Bootstrap accordion-group指令的is-open属性指向可绑定表达式。表达式必须是布尔值，可以解析为 true 或 false 。如果值为true，则打开accordion组。

is-open属性是双向绑定，这意味着每当父范围属性更改时，accordion-group的相应隔离范围属性也会更改，反之亦然。因此，您可以使用它来监视手风琴是使用$watch功能打开还是关闭。

因此，为了使您的小提琴演示工作，您需要做几件事：

将is-open属性绑定到控制器中的scope属性。
确保scope属性为true或false。
为范围属性创建$ watch（）。

将is-open属性绑定到控制器中的scope属性很简单。在这种情况下，我只是将$ scope.status创建为一个对象，其中一个属性名为open，并为其赋值false。该值恰好是初始值，以便在您第一次运行演示时关闭手风琴。这里重要的是状态必须是一个对象，因为这是双向绑定的工作原理。如果您将状态设置为字符串（例如，$scope.status = true），并且在标记中绑定is-open to status（即is-open="status"），则它将只是一个绑定。在这种情况下，它会将accordion-group初始化为open，但在单击要打开和关闭的元素时不会更新范围。

所以，你这个部分的控制器，你有：

$scope.status = {
    open: false
};

在您的标记中，您将拥有：

<accordion-group heading="Accordion 2" is-open="status.open">
    Accordian 2 content.
</accordion-group>

现在最后一部分是$ watch功能。 $ watch功能有几个关键部分。首先，你必须告诉它要注意什么，所以在这种情况下你要传递status.open。这就是我们想要监控的范围，看它是否会发生变化。接下来，有听众功能。

总有两个值传递给侦听器函数。首先是你正在观看的东西的新价值。第二个是你正在观看的东西的旧价值。这些论点的顺序在这里很重要。无论你怎么称呼它，第一个值总是新值。所以，现在这个$ watch函数应该有意义：

$scope.$watch('status.open', function(newval, oldval){
    if(oldval !== newval) {
        var state = newval ? 'opening' : 'closing';
        alert('Accordion 2 is '+state);
    }
});

在if语句中，我通过比较旧值和新值来检查status.open的值是否实际发生了变化。如果旧的和新的价值观彼此不相等，那么你可以做你的事。在这种情况下，我创建了一个名为state的变量，并使用三元运算符来检查新值，如果它是真的，我将状态值设置为＆＃39;打开＆＃39;如果没有，它将设置为关闭＆＃39;。然后，我只是打电话给警报。

这已经太长了，所以我只是提到$ watch函数中的第三个值是对象相等。 Ben Nadel有一个很棒的（短）小experiment video来解释你如何以及何时使用对象相等。我还为您创建了此 Plunker ，其中显示了如何对动态创建的accordion-groups使用此类深度值检查。

希望这有助于解决您的挑战。

处理扩展事件的bootstrap手风琴放置在选项卡内

1 个答案:

Updated Fiddle