Блог

Я пытаюсь написать угловую директиву, которая превратит всплывающую подсказку для элемента, если там есть, если текст внутри него слишком длинный и имеет многоточие. Я подумал, что это будет достаточно просто, поскольку я просто сверил offsetwidth с шириной прокрутки. Однако директива, которую я написал, возвращает 0 для offsetwidth и scrollwidth независимо от того, на какой элемент я его нажимаю. Вот моя директива:

 (function() {
    'use strict';
    angular.module('base')
        .directive('offsetWidth', offsetWidth);

    function offsetWidth() {
        var directive = {
            link: link,
            restrict: 'A'
        };

        function link(scope, element, attrs) {
            var el = element[0];
            console.log('element ', element);
            console.log(el.scrollWidth);
            if (el.offsetWidth < el.scrollWidth) {
                console.log('inside if ', el);
                attrs.tooltipEnable = true;
            } else {
                console.log('inside else');
            }
        }

        return directive;
    }

})();
  

Есть ли что-то, чего мне не хватает в моем коде, чтобы это работало? Спасибо.

link функция запускается, когда DOM уже скомпилирован, и модификация атрибута не имеет требуемого эффекта. Таким образом, есть способ добавить общий атрибут (между загрузкой пользовательского интерфейса tooltip и текущей директивой) на этапе компиляции.

 angular.module('base').directive('offsetWidth',  offsetWidth);

function offsetWidth()  {
  return {
     compile: function ($element, attrs) {
        attrs.tooltipEnable = 'isTooltipEnabled';
        return function ($scope, $element, $attrs) {
          // place code here
          // --- for testing:start
          setTimeout(function() {
            // enable tooltip after timeout
            $scope.isTooltipEnabled = true;
            $scope.$applyAsync();
          }, 5000);
          // --- for testing:end 
        };
     },
     scope: false // don't create own scope
  };
}
  

HTML

 <button tooltip-placement="bottom" 
     uib-tooltip="On the bottom"
     offset-width 
     type="button" 
     class="btn btn-default">Tooltip bottom</button>