Question

我使用这个简单的指令来了解DOM元素的大小（高度/宽度）：

angular.module('myApp')
    .directive('elementResize', function () {
    'use strict';
        return {
            restrict: 'A',
            controller: ['$scope', '$element', function($scope, $element ) {

            $scope.getElementDimensions = function () {
               return { 'h': $element.height(), 'w': $element.width() };
            };

            $scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
                $scope.windowHeight = newValue.h;
                $scope.windowWidth = newValue.w;
            }, true);
        }]

        };
    });

这是HTML模板：

<div element-resize>Element1.width:{{windowWidth}}</div><div element-resize>Element2.width:{{windowWidth}}a div with more width space</div>

我有两个div是兄弟，但是使用我的指令我得到的是最新版本的大小，而不是让每一个都是真正的大小。我在这里错过了什么？

更新如果我有第一个div的控制器，它将工作。为什么呢？

Answer 1

为什么不使用链接而不是控制器。这是一个例子plunker。

app.directive('elementResize', function() {
  'use strict';
  return {
    restrict: 'A',
    template: 'Element.width:{{windowWidth}}',
    scope: {},
    link: function(scope, element, ctrl) {
      console.log(element)
      scope.getElementDimensions = function() {
        return {
          'h': element[0].clientHeight,
          'w': element[0].clientWidth
        };
      };

      scope.$watch(scope.getElementDimensions, function(newValue, oldValue) {
        scope.windowHeight = newValue.h;
        scope.windowWidth = newValue.w;
      }, true);
    }
  };
});

为什么我使用resize指令在不同的DOM元素上获得相同的元素大小？

1 个答案: