javascript - ng-show/hide 但具有 Bootstrap 的折叠效果

Question

我们正在使用 Angular 和 Bootstrap(注意:但不是 Angular UI Bootstrap)。我有一个 div ，上面有一个 ng-show 。我不喜欢的是，当它显示或隐藏时，它不会表现出折叠，就像您在 Bootstrap 的折叠中看到的那样。我怎样才能获得这种与 ng-show 一起使用的这种增长/收缩行为？就像，当 ng-show 为 true 时，我想看到元素崩溃显示。当 ng-show 为 false 时，我希望元素折叠隐藏。

Answer 1

您可以扩展 ngShowDirective 的行为通过使用 $decorator在你的配置里面。

使用自定义指令也可以实现相同的效果，但我认为不可能使用 ng-show 。这是我的第一个方法 - 除了 ng-show 之外创建一个新指令。但后来ngShow总是破坏隐藏动画。

UI Bootstrap 正在使用 directive 来完成此操作您可以使用 collapse="isVisisble" 进行调用.

请参阅下面的演示以及此处的 jsfiddle .

花了一段时间才弄清楚这一点，但我认为这就是您正在寻找的。

// hide class set in ngShow directive like below (not needed for bootstrap collapse)
//var NG_HIDE_CLASS = 'ng-hide';
//var NG_HIDE_IN_PROGRESS_CLASS = 'ng-hide-animate';

angular.module('myApp', [])
    .config(function ($provide) {
    $provide.decorator('ngShowDirective', function ($delegate, $animate) {
        var ngShow = $delegate[0];
        console.log(ngShow);
        ngShow.compile = function (element, attr, transclude) {
            return function (scope, element, attrs) {
                console.log(scope, element, attr);
                scope.$watch(attr.ngShow, function ngShowWatchAction(value) {
                    console.log('own watch', value, value ? 'show': 'hide');
                    $(element).addClass('collapse');
                    $(element).collapse(value ? 'show': 'hide');
                   
                    /* // org source code below
                    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
                        tempClasses: NG_HIDE_IN_PROGRESS_CLASS
                    });*/
                });
            }
        };
        delete ngShow.link; // delete original link because our compile returns new link method
        return $delegate;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-init="visible=false">
    <button class="btn btn-primary" ng-click="visible = !visible">Toggle info</button>
    <div ng-show="visible">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>