javascript - AngularJS 何时将模型更改传播到 DOM？

Question

在 AngularJS 中，您可以使用 $watch 监视模型更改。所以，如果我写这样的东西:

$scope.$watch('model', function (newValue, oldValue) {
    // React to the change...
});

...然后当模型 $scope.model 更改并执行某些操作时我可以收到通知。

但是，如果该 model 绑定(bind)到 AngularJS View (即 model.name 绑定(bind)到 HTML 页面上的用户名)，则当 $watch 回调触发，此更改尚未传播到 DOM。

我的问题是:AngularJS 何时将模型更改传播到 DOM，以及如何监听该事件？

编辑

用例是制作一个绝对定位的滚动条，它具有可变大小的固定标题和滚动内容(请参阅此 Plunk 以了解想法: http://plnkr.co/edit/LdYl7e7GYhdGiF3NQ0Bv )

这就是该指令现在的样子:

.directive('psScroller', function ($timeout) {
    return {
        require: 'ngModel',
        replace: true,
        restrict: 'A',
        transclude: true,
        scope: {
            'model': '=ngModel'
        },
        controller: function ($scope) {
            var _this = this;
            var _headerElement;
            var _contentElement;

            $scope.resize = function () {
                if (!_headerElement || !_contentElement) return;
                $timeout(function() {
                    _contentElement.css('top', _headerElement.height())
                });
            };

            this.setHeaderElement = function (headerElement) {
                _headerElement = headerElement;
                _headerElement.on('keydown', $scope.resize);
            };

            this.setContentElement = function (contentElement) {
                _contentElement = contentElement;
            };
        },
        link: function (scope) {
            scope.$watch('model', function () {
                scope.resize();
            }, true);
        },
        template: '<div ng-transclude></div>'
    };
});

所以我的想法是调整内容高度以匹配标题高度。

Answer 1

Angular 指令负责反射(reflect) DOM 中的模型更改。它们在模型元素上注册监视监听器，并在调用这些监视监听器时更改 DOM。因此，当您监视与指令相同的模型属性时，您的监视监听器可能会在相应指令注册的监视监听器之前被调用，因此 DOM 尚未更改。

您可以在监视监听器中使用超时或 $scope.$evalAsync() 来推迟代码的执行并等待 DOM 更改。例如，this answer 中解释了两种解决方案的不同之处。相关问题。