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

Question

在我的项目中我使用 ui.bootstrap.tabs。在 md 和 lg 屏幕上，选项卡应垂直堆叠显示，但在屏幕 sm 和 xs 上，我希望看到它们水平显示。我只需要将垂直属性的值设置为 true 或 false。当屏幕尺寸改变时，我匹配 md 或 lg 尺寸并设置属性 vertical_tab_appearance = true 并且与 sm 和 lg 尺寸相同, 属性具有 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;
    }
  });

我可以在这里做点什么，还是在这种情况下我应该使用 ng-if？

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 属性中的值

Dynamically change value in uib-tabset attribute

twitter-bootstrap

angularjs

angular-bootstrap