Question

我们正在使用Angular和Bootstrap（注意：但不是Angular UI Bootstrap）。我有一个div，上面有ng-show。我不喜欢的是，当它显示或隐藏时，它并没有表现出崩溃，就像你看到Bootstrap崩溃一样。我怎样才能获得崩溃用于ng-show的这种不断增长/缩小的行为？就像，当ng-show为真时，我希望看到元素折叠显示。当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>

Answer 2

使用Angular Bootstrap uib-collapse

https://angular-ui.github.io/bootstrap/

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

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

2 个答案: