Question

我有一个$watch函数，它垂直居中一个元素，因为我并不总是知道元素的高度和宽度。如果我在$timeout函数之前的指令中有$watch，则该函数有效，因此$digest被调用足够多次，以便在高度或宽度时调用$watch函数当页面最终加载时，我的元素会发生变化但是，如果从指令中删除$timeout，则通常不会调用$watch，因为当元素的高度或宽度发生更改时，$digest周期没有发生。使用$timeout这通常会导致错误："10 $digest() iterations reached. Aborting!"

有没有人知道在不经常使用$digest的情况下触发$timeout周期的其他方式？或者有没有办法可以编辑我的$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');
        });
    };
});

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

1 个答案: