Рассчитать ширину элемента - угловая директива

Question

Рассчитать ширину элемента - угловая директива

0

Я новичок в угловой. Я использую angular1.4 и bootstrap. Проблема. У меня есть диапазон, ширина которого увеличивается или уменьшается в зависимости от связанного текстового содержимого.

<div myStyleDir>
   <span>{{someContent}}</span>
</div>

В области:

$scope.someContent = "abcdefgh";

Основываясь на ширине этого диапазона в DOM, я должен продолжить некоторые другие вычисления, которые я хочу сделать, используя директиву myStyleDir. В ссылочной функции директивы ширина параметра jQuery-lite 'element' идет как '0'.

Span еще не отображается, когда функция "link" выполняется? Как получить ширину элемента <span>{{someContent}}</span> внутри моей функции ссылок? Если это не осуществимый подход, предложите альтернативу. Заранее спасибо !

user3427320 08 сен. 2016, в 06:44

Источник

0

Вы можете передать модель someContent в директиву, затем наблюдать за любым изменением, а затем пересчитывать ширину.
Muhammad Aref 08 сен. 2016, в 04:28

Теги:

javascript

jquery

html

angularjs

css

2 ответа

0

Вы можете использовать следующую директиву:

.directive('YourDirectiveName', function() {
    return {
        restrict: 'EA',
        scope: {data:'='},
        link: function(scope, iElement, iAttrs) {
           var elementRect = iElement[0].getBoundingClientRect();
             var width = elementRect.width;
             var height = elementRect.height;
             .......
        }
    }
});

Примечание. При разработке чего-либо, используя угловую директиву, вы должны регистрировать контент там, где хотите. Так что это поможет вам много в вашем развитии.

Я использовал это при разработке графиков (SVG), используя угловые для своих веб-приложений и мобильных приложений.

Prasad Shinde 08 сен. 2016, в 03:49

0

Почему вы вводите $ окно здесь? Почему вы ссылаетесь на кучу свойств области видимости? Откуда берется graphRect? Я полагаю, вы имеете в виду elementRect?
ryanlutgen 08 сен. 2016, в 05:11
0

Вы правы: $ window объект здесь бесполезен, но вы можете видеть, что я его не использовал. Это по удобству. Я отредактирую свой ответ.
Prasad Shinde 08 сен. 2016, в 05:13

Ещё вопросы

Вы можете передать модель someContent в директиву, затем наблюдать за любым изменением, а затем пересчитывать ширину.
Почему вы вводите $ окно здесь? Почему вы ссылаетесь на кучу свойств области видимости? Откуда берется graphRect? Я полагаю, вы имеете в виду elementRect?
Вы правы: $ window объект здесь бесполезен, но вы можете видеть, что я его не использовал. Это по удобству. Я отредактирую свой ответ.

ryanlutgen · Accepted Answer · 2016-09-08T04-12-00.000Z

Я предполагаю, что вы используете Angular 1.x, поэтому это должно сработать для вас:

HTML:

<my-style-directive>{{test}}</my-style-directive>

Директива JS:

.directive("myStyleDirective", ['$timeout', function($timeout) {
  return {
    restrict: 'E',
    scope: true,
    link: function(scope, elem, attrs) {
      var getWidth = function() {
        $timeout(function() {
          console.log(elem[0].getBoundingClientRect().width);
        });
      };

      getWidth();

      scope.$watch('test', function (newval, oldval) {
        if (newval !== oldval) {
          getWidth();
        }
      });
    }
  };
}]);

Plnkr, чтобы показать: http://plnkr.co/edit/eVxDZTmjY22yG1aOScwC

По сути, это то, что нужно сделать обертку вокруг любого контента, который вы хотите получить. Помещая его как атрибут в div, ширина будет считаться такой же широкой, как у родителя, например, у вас есть div на самом верхнем уровне, ширина div будет равна ширине тела. Без этого подхода единственным методом получения ширины было бы сделать некоторый выигрышный расчет, и он будет связан с вашим CSS.

Тайм-аут $ должен гарантировать, что DOM закончит рендеринг, чтобы получить точное чтение. По сути, то, что $ timeout делает, выполняется, когда цикл событий JS пуст, то есть после того, как все инициализировано и все отображается. Подробнее о том, как работают тайм-ауты в JS, см. Здесь: https://www.youtube.com/watch?v=8aGhZQkoFbQ#t=10m44s

Этот ответ в порядке. Но если содержимое myStyleDirective изменяется, функция ссылки не myStyleDirective директива myStyleDirective не знает об изменении ширины .
Если ваш контент внутри myStyleDirective представляет собой переменные области видимости или у вас есть значение области, которое может измениться в результате, вы можете передать область в директиву и иметь часы, которые перепроверяют ширину. Я обновил свой ответ, чтобы отразить это.