在 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>'
};
});
所以我的想法是我调整内容高度以匹配标题高度。