gpt4 book ai didi

javascript - 如何更改 angularJS 中的观察者顺序?

转载 作者:行者123 更新时间:2023-11-30 00:29:22 25 4
gpt4 key购买 nike

我已经编写了一个具有本地作用域的 Controller 和指令。我在 postLink 方法中对范围变量设置了 watcher,并添加了 $interval 用于更改变量,我还在我的 Controller 中添加了对绑定(bind)变量的 watcher。

console.clear();
var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', ['$scope',
function($scope) {

$scope.$watch(function() {
return $scope.ctrlVar;
}, function(newValue) {
console.log('WATCHER TWO: newValue = ', newValue);
}, true);

}
]);

myApp.directive('testDirective',
['$interval', function($interval) {
return {
scope: {
date: '=dateModel'
},
template: "<input type='text' value='{{date}}' />",
restrict: 'E',
link: function postLink(scope, element) {
console.log('link');
var i = 1;
$interval(function() {
scope.date = i++;

}, 1000);

scope.$watch('date', function(){
console.log('WATCHER ONE: newValue = ', scope.date);
});

}
};
}]
);

html:

<body ng-app="myApp">
<div ng-controller="MainCtrl">
<test-directive date-model="ctrlVar"></test-directive>
</div>

<script src="script.js"></script>
</body>

</html>

我看到调用监听器的顺序是

WATCHER IN CONTROLLER: newValue =  undefined
script.js:32 WATCHER IN DIRECTIVE: newValue = undefined
script.js:32 WATCHER IN DIRECTIVE: newValue = 1
script.js:10 WATCHER IN CONTROLLER: newValue = 1
script.js:32 WATCHER IN DIRECTIVE: newValue = 2
script.js:10 WATCHER IN CONTROLLER: newValue = 2

我注意到,当 $interval 中的 newValue 发生变化时,首先会调用指令中的 watch 监听器。在我的生产代码中(我没有发布代码,因为它有点复杂而且我创建了 plunk 并且观察者的行为是不同的)。

你知道如何管理收听者的秩序吗?可能吗?

这是例子http://plnkr.co/edit/QzeZar?p=preview

最佳答案

我同意@DRobinson 的观点,但如果您绝对必须更改观察者的顺序,您可以使用超时来为观察者设置某种“优先级”。我不知道有什么方法可以在注册后更改观察者,但你可以延迟注册。

myApp.controller('MainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
$timeout(function () {
$scope.$watch(function () {
return $scope.ctrlVar;
}, function (newValue) {
console.log('WATCHER TWO: newValue = ', newValue);
}, true);
}, 10);

}]);

这是一个 fiddle ,显示观察者第一次在观察者一次之后发射两次。 http://jsfiddle.net/qj7gn5x4/1/

关于javascript - 如何更改 angularJS 中的观察者顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30191980/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com