javascript - $digest 的调用不足以触发 $watch - AngularJs

Question

我有一个 $watch 函数可以使元素垂直居中，因为我并不总是知道元素的高度和宽度。 如果我在 $watch 函数之前的指令中有 $timeout，那么该函数就可以工作，这样 $digest 就可以为我的 调用足够的次数>$watch 当我的元素的高度或宽度在页面最终加载时发生变化时调用的函数。
但是，如果我从指令中删除 $timeout，通常不会调用 $watch，因为 $digest 循环不会在高度时发生或元素的宽度改变了。 使用 $timeout 这通常会导致错误:"10 $digest() iterations reached. Aborting!"

有没有人知道另一种无需不断使用 $timeout 即可触发 $digest 循环的方法？或者有什么方法可以编辑我的 $watch 函数以使其正常运行？或者有什么我可以标记到我的元素上，以便它在加载时触发 $digest 循环吗？

这是我的指令:

angular.module('task2')
.directive('centerVertical', function ($timeout) {
    return function (scope, element, attrs) {
        scope.$watch(function () {
            $timeout();
            return { 
                'h': element[0].offsetHeight
            };
        }, 
        function (newValue, oldValue) {
            var elementHeight = newValue.h;

            /*To account for rounding errors and not loop*/
            if(elementHeight % 2 === 0)
            {
                element.css('margin-top', '-' + ((elementHeight) / 2) + 'px');
            }
            else 
            {
                element.css('margin-top', '-' + ((elementHeight + 1) / 2) + 'px');
            }
        }, true);

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

谢谢!

Answer 1

我找到了一种完全不使用 $watch 并在 DOM 加载后更新高度的方法。这很简单，我觉得以前没看到这个很傻。我希望这可以帮助那些像我一样花费数小时尝试做一些非常复杂的事情的人。

angular.module('task2')
.directive('centerElement', function ($timeout) {
    return function (scope, element, attrs) {
        angular.element(document).ready(function () {
            element.css('margin-top', '-' + (element[0].offsetHeight / 2) + 'px');
            element.css('margin-left', '-' + (element[0].offsetWidth / 2) + 'px');
        });
    };
});