Динамически изменять значение в атрибуте uib-tabset - PullRequest
Новая
       28

Динамически изменять значение в атрибуте uib-tabset

1 голос
/ 19 июня 2019

В моем проекте я использую 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 в этой ситуации?

1 Ответ

0 голосов
/ 23 июня 2019

Если кто-то еще столкнется с той же проблемой, вот решение.Я решил использовать 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;
            });
        });
...