热毛巾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 =＆＃34; hidden＆＃34;

这将从要折叠的窗口小部件内容开始。 ccWidgetMinimize启动图标。我现在需要的是弄清楚如何根据内容小部件的可见状态以正确的方向启动图标。

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

scan.useDelimiter(":\\s*");