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

在AngularJS中，您可以使用

$watch

查看模型更改。因此，如果我写下如下内容：

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

…然后，当模型

$scope.model

更改并执行某些操作时，可以通知我

但是，如果

model

绑定到AngularJS视图（即

model.name

绑定到HTML页面上的用户名称），当

$watch

回调触发时，此更改还不会传播到DOM

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

编辑

用例是制作一个绝对定位的滚动条，它有一个可变大小的固定标题和滚动内容（请参阅此链接以获得想法：）

这就是指令现在的样子：

.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>'
    };
});

指令（'psScroller'，函数（$timeout）{ 返回{ 要求：'ngModel'， 替换：正确， 限制：“A”， 是的， 范围：{ 'model'：'=ngModel' }, 控制器：功能（$scope）{ var_this=这个； var_头相关； var_内容元素； $scope.resize=函数（）{ 如果（！_headerElement | |！_contentElement）返回； $timeout（函数（）{ _contentElement.css（'top'，_headerElement.height（）） }); }; this.setHeaderElement=函数（headerElement）{ _headerElement=headerElement； _headerElement.on（'keydown'，$scope.resize）； }; this.setContentElement=函数（contentElement）{ _contentElement=contentElement； }; }, 链接：功能（范围）{ 范围：$watch（'型号'，功能（）{ scope.resize（）； }，对）； }, 模板：“” }; });

---

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

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

---

您可以在watch listener中使用超时或

$scope.$evalAsync（）

来延迟代码的执行，并等待更改DOM。例如，在一个相关问题中解释了两种解决方案的不同之处。

请说明用例是什么？@Ajaybeniwal我有一个DOM元素

a

，它取决于包含模型文本的元素

b

的大小。我无法调整

a

的大小，直到我知道新文本的

b

有多高。我认为从ngModel更新DOM时不会触发事件。您可以在此处查看AngularJs事件循环。注意DOM更新发生在最后。我建议为您的用例创建一个指令。@CuongVo我不确定如何解决这个问题？我仍然需要监视模型中的更改，因此需要使用

$watch

。。。除非我遗漏了什么？你能编辑你的问题，包括一些模拟数据和一个简单的你想做的模板吗？我不太明白

a

在用例中做了什么，也不明白如果

a

和

b

都依赖于同一个模型，为什么当模型发生变化时它也不会更新其大小。