Question

我想创建一个以div为中心的指令。

到目前为止，我有这段代码：

app.directive("setcenter", function () {
    return {
        scope:{
            setcenter: '='
        },
        link: function (scope, element, attrs) {

            scope.$watch('setcenter', function (newValue) {
                if (newValue == true) {
                    var width = element.width();
                    element.css('position', 'absolute');
                    element.css('top', '80px');
                    element.css('left', '50%');
                    element.css('z-index', '200');
                    element.css('margin-left', '-' + width / 2 + 'px');
                }
            });
        }
    }
});

问题是元素的宽度。该指令的重点是使用此指令的div没有设置宽度。我希望这个指令能够找出div的宽度和中心。

我遇到的问题是，当调用指令时，div的实际宽度尚不清楚。当我在我的情况下使用它时，div是800px，但是当页面加载完毕时，div是221px。

那么，我该怎么做才能等到div的实际宽度已知？

Answer 1

首先，当我为指令而不是链接函数定义控制器时，我才使用此逻辑。因此，在链接函数中定义它可能会导致不同的行为，但我建议您首先尝试它，如果您无法使其工作，请切换到使用控制器。

据我所知，您需要做的唯一更改是将$ scope更改为范围调用，将$ element更改为element，因为依赖注入对象将成为标准链接函数参数。

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

  $scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
    //<<perform your logic here using newValue.w and set your variables on the scope>>
  }, true);

  $element.bind('resize', function () {
    $scope.$apply();
  });

在阅读关于观看$ window而非当前元素的类似用法之后，我想到了这种用法的想法，可以在这里找到原始作品。

Angular.js: set element height on page load

Answer 2

詹姆斯＆＃39;回答让我：

app.directive('measureInto', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function() {
                    return element[0].clientWidth;
                }, function(value){
                    scope[attrs.measureInto] = element[0].clientWidth + 10;
                });
            }
        };
    });

所以，在运行时，我添加这个并分配到任何范围变量我希望元素的宽度我正在寻找

Answer 3

我遇到了类似的问题，发现当页面上的所有ng-ifs（或使用ngAnimate的任何其他内容）都已解决时，维度可靠地正确 - 这可能会发生类似的事情。如果是这样，这将成功，而不添加任何新的侦听器：

$scope.tryGetElementDimensions = function () {
    if (!angular.element("your-element") || ((angular.element("your-element")[0].classList).contains("ng-animate")
       $timeout(function() {
           $scope.tryGetElementDimensions()
       })
    }
    else {
        $scope.getElementDimensions()
    } 

$scope.getElementDimensions = function (){
    //whatever you actually wanted to do
}

link: function (scope, element, attrs) {
    $scope.tryGetElementDimensions()
}

Angular会在动画中添加ng-animate和ng-enter，ng-leave类，并且当这些类全部被删除时，您可以确信它已完成。没有第二个参数的$ timeout只等待下一个摘要。

Answer 4

尚无评论，因此这个答案。找到了类似strom2357建议的类似解决方案。 $ timeout非常适合让你知道当dom准备就绪时，它非常简单。我正在使用此解决方案来获取ui-view元素宽度。找到它in a fiddle。

var app = angular.module('app', []);

app.controller('MyController', function($timeout, $scope){

  $timeout(function(){
    //This is where you would get width or height of an element
    alert('DOM ready');
  });

  alert('DOM not ready');

});

我们什么时候知道Angular中元素的实际宽度？

4 个答案: