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

Question

我已经使用 Angular Bootstrap 在选项卡中放置了手风琴，但我无法处理手风琴窗格的展开事件。这是fiddle：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 的布尔值。如果该值为真，则打开手风琴组。

is-open 属性是双向绑定，意味着每当父作用域属性发生变化时，手风琴组对应的独立作用域属性也会发生变化，反之亦然.因此，您可以使用它来监视手风琴是打开还是关闭，并带有 $watch 功能。

因此，为了使您的 Fiddle 演示正常运行，您需要做几件事：

将 is-open 属性绑定到控制器中的范围属性。
确保范围属性为真或假。
为范围属性创建一个$watch()。

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

因此，这部分的控制器，您将拥有：

$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 的变量并使用三元运算符来检查新值，如果为真，我将 state 的值设置为 'opening'，如果不是，则设置为 'closing'。然后，我只是调用警报。

这已经太长了，所以我只提一下 $watch 函数中的第三个值，即对象相等性。 Ben Nadel 有一个很棒的（简短的）小 experiment video that explains how and when you use object equality. I also created this Plunker 给你，它展示了如何在动态创建的手风琴组上使用这种深度值检查。

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

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

handle expand event of bootstrap accordion placed inside tabs

accordion

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap

Updated Fiddle