在AngularJS中,您可以使用$watch
监视模型更改。所以,如果我写下这样的话:
$scope.$watch('model', function (newValue, oldValue) {
// React to the change...
});
...然后,当模型$scope.model
发生变化并做某事时,我会收到通知。
但是,如果model
绑定到AngularJS视图(即model.name
绑定到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>'
};
});
所以我的想法是调整内容高度以匹配标题高度。
答案 0 :(得分:0)
Angular指令负责反映DOM中的模型更改。它们在模型元素上注册监视侦听器,并在调用这些监视侦听器时更改DOM。因此,当您观察与指令相同的模型属性时,可以在相应指令注册的监视侦听器之前调用监视侦听器,因此DOM尚未更改。
您可以在监听监听器中使用超时或$scope.$evalAsync()
来推迟代码的执行,并等待DOM更改。两个解决方案的不同之处在于this answer中对相关问题的解释。