热毛巾ccWidgetHeader

Question

我有一个关于 Hot Towel ccWidgetHeader 指令的简单问题，它允许在 div 上折叠。基本上，我的问题是如何将小部件默认为折叠状态？下面是我的小部件：

<!-- List of Parent Categories -->
                <div data-ng-repeat="category in vm.categories">
                    <div class="widget wviolet">
                        <div data-cc-widget-header title="{{category.name}}"
                             allow-collapse="true"></div>
                        <!-- TODO: how to start these collapsed -->
                        <div class="widget-content text-center text-info">
                            <table class="table table-hover table-condensed table-striped table-clickable table-responsive">
                                <thead>
                                    <tr>
                                        <th>Category</th>
                                        <th>Spot Number</th>
                                        <th>Member</th>
                                        <th>Member Website</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="spot in vm.spotList | filter:{parentCategory: category.name}"
                                        data-ng-click="vm.onSpot(spot)">
                                        <td align="left">{{spot.category}}</td>
                                        <td align="left">{{spot.sequence}}</td>
                                        <td align="left">{{spot.companyName}}</td>
                                        <td align="left"><a href="http://{{spot.companyURL}}"><img ng-src="{{spot.companyIcon}}" /></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="widget-foot">
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- End list of parent categories --> 

提前感谢您的帮助....

实际上是 widgetheader.html 中的 ccWidgetMinimize 指令进行切换。 ccWidgetMinimize 指令如下：

app.directive('ccWidgetMinimize', function () {
    // Usage:
    // <a data-cc-widget-minimize></a>
    // Creates:
    // <a data-cc-widget-minimize="" href="#"><i class="fa fa-chevron-up"></i></a>
    var directive = {
        link: link,
        template: '<i class="fa fa-chevron-up"></i>',
        restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {
        //$('body').on('click', '.widget .wminimize', minimize);
        attrs.$set('href', '#');
        attrs.$set('wminimize');
        element.click(minimize);

        function minimize(e) {
            e.preventDefault();
            var $wcontent = element.parent().parent().next('.widget-content');
            var iElement = element.children('i');
            if ($wcontent.is(':visible')) {
                iElement.removeClass('fa fa-chevron-up');
                iElement.addClass('fa fa-chevron-down');
            } else {
                iElement.removeClass('fa fa-chevron-down');
                iElement.addClass('fa fa-chevron-up');
            }
            $wcontent.toggle(500);
        }
    }
});

我是一个指令初学者，感谢任何帮助。

Answer 1

我有一个部分答案，就是将内容小部件 div 设置为：hidden="hidden"

这将从折叠的小部件内容开始。 ccWidgetMinimize 启动图标向上。我现在只需要根据内容小部件的 :visible 状态，弄清楚如何以正确的方向启动图标。

我找出了开始状态部分。我创建了一个 ccWidgetToggle，它根据内容小部件的 :visible 属性将元素设置为正确的起始状态。此外，我颠倒了向上/向下箭头的含义；如果内容折叠，则向上箭头；如果内容被展开，向下箭头。 up 表示扩大； down 意味着崩溃。这是我的新指令：

 app.directive('ccWidgetToggle', function () {
    // Usage:
    // <a data-cc-widget-toggle></a>
    var directive = {
        link: link,
        template: '<i></i>',
        restrict: 'A'
    };
    return directive;

    function link(scope, element, attrs) {
        //$('body').on('click', '.widget .wminimize', minimize);
        attrs.$set('href', '#');
        attrs.$set('wminimize');
        element.click(minimize);
        // Start state
        // <i> element in the template
        var iElement = element.children('i');
        var $wcontent = element.parent().parent().next('.widget-content');
        if ($wcontent.is(':visible')) {
            iElement.removeClass('fa fa-chevron-up');
            iElement.addClass('fa fa-chevron-down');
        } else {
            iElement.removeClass('fa fa-chevron-down');
            iElement.addClass('fa fa-chevron-up');
        }

        function minimize(e) {
            e.preventDefault();
            var $wcontent = element.parent().parent().next('.widget-content');
            // <i> element in the template
            var iElement = element.children('i');
            // if content is visible; toggle below is going to make it not visible
            if ($wcontent.is(':visible')) {
                iElement.removeClass('fa fa-chevron-down');
                iElement.addClass('fa fa-chevron-up');
            } else {
                iElement.removeClass('fa fa-chevron-up');
                iElement.addClass('fa fa-chevron-down');
            }

            // toggle visibility
            $wcontent.toggle(500);
        }
    }
});