javascript - 指令并不总是在页面加载时触发

Question

我有一个指令，可以获取特定元素的高度并将其应用于另一个元素。

但由于某种原因，它并不总是在页面加载时触发。我认为也许在某些情况下元素加载时间太长，并且仅在完全加载后才处理它可能是一个更明智的想法。它似乎在页面调整大小(有时)方面效果很好。

这是为什么？我该如何解决它？

例如:

// grab information of div height here    

<div class="col-sm-6" id="left-photos" element-size key="leftPhotoSize"></div>

// apply it here

<div class="col-sm-6" ng-style="{ 'height': leftPhotoSize.height + 30 + 'px' }"></div>

指令

angular.module('adsomaApp')
  .directive('elementSize', function ($timeout, $window) {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var height, width;
        var measure = function () {
          height = element[0].offsetHeight;
          width = element[0].offsetWidth;
          if (attrs.key) {
            scope[attrs.key] = {
              height: height,
              width: width
            };
          }
          scope.elementSize = {
            height: height,
            width: width
          };
        };

        $timeout(function () {
          measure();
        });
        $window.load(function() {
          measure();
        });
        angular.element($window).bind('resize', function () {
          measure();
          scope.$digest();
        });
      }
    };
  });

Answer 1

您能否将您的测量函数放入 $watch 函数中，然后加上scope.$apply()。