Question

在我的项目中，我使用ui.bootstrap.tabs。在md和lg上，屏幕上的标签应该垂直堆叠，但在屏幕sm和xs上，我希望看到它们水平放置。我需要做的是在vertical属性中设置true或false的值。更改屏幕大小后，我可以匹配md或lg的大小，并设置属性vertical_tab_appearance = true，而设置sm和lg的大小相同，则属性为{ {1}}值，但是false指令不知道该属性的值已更改。

uib-tabset

这是我的屏幕尺寸事件：

 <div class="col-md-2 small hidden-print">
        <div ng-model="value">
            <uib-tabset vertical="vertical_tab_appearance" type="pills"> 
                <uib-tab></uib-tab>
            </uib-tabset> 
        </div>
</div>

在这种情况下我可以在这里做些什么还是应该使用screenSize.on('md, lg', function (match) { if (match) { $scope.vertical_tab_appearance = true; } }); screenSize.on('sm, xs', function (match) { if (match) { $scope.vertical_tab_appearance = false; } });？

Answer 1

如果其他人也会遇到相同的问题，这是一个解决方案。我决定在模块配置中使用uibTabsetDirective装饰器，并在链接功能的垂直属性中添加观察者。

.config(function ($provide) {
            $provide.decorator('uibTabsetDirective', function($delegate) {
                var directive, link, scope;
                directive = $delegate[0];
                link = directive.link;
                scope = directive.scope;
                scope['vertical'] = '=';
                directive.compile = function() {
                  return function Link(scope, element, attrs, ctrls) {
                    scope.$watch(attrs.vertical, function() {
                        console.log(scope.vertical);
                    });

                    return link.apply(this, arguments);
                  };
                };
                return $delegate;
            });
        });

动态更改uib-tabset属性中的值

1 个答案: