本文介绍了$watch 未检测到服务变量的变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angularjs 的新手，我正面临一个奇怪的问题，其中 $watch 没有在服务中的变量更改时触发.我不知道我哪里出错了.
I am new to angularjs and I am facing this strange problem where $watch is not firing on change of a variable in service. I don't know where I have made a mistake.
Plunkr:Plunkr 链接
script.js 文件:
script.js file:
var app = angular.module("app", []);
app.factory("loggedInUser", [loggedInUser]);
function loggedInUser() {
var currentLoggedInUser = undefined;
setTimeout(function() {
currentLoggedInUser = "Karthik";
console.log("Updated user name");
}, 3000);
return {
getLoggedInUser: function() {
return currentLoggedInUser;
}
};
}
app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);
function ctrl($scope, loggedInUser) {
var vm = this;
$scope.$watch(function() {
return loggedInUser.getLoggedInUser();
}, function() {
vm.loggedInUserName = loggedInUser.getLoggedInUser();
console.log("Inside Watch");
},true);
}
HTML:
<html>
<head>
<script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js" data-require="[email protected]" data-semver="1.5.8"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1 ng-controller="ctrl as vm">
Hello <span ng-bind="vm.loggedInUserName"></span>
</h1>
</body>
</html>
推荐答案
使用 $timeout 而不是 setTimeout ?.. 因为它需要 $scope.$apply (outside angular event) .. $timeout 是 setTimeout 的一个角度包装.. 类似:
use $timeout instead of setTimeout ? .. cause it need$scope.$apply (outside angular event) .. $timeout is a angular wrapping for setTimeout .. something like:
// Code goes here
var app = angular.module("app", []);
app.factory("loggedInUser", ["$timeout", loggedInUser]);
function loggedInUser($timeout) {
var currentLoggedInUser;
$timeout(function() {
currentLoggedInUser = "Karthik";
console.log("Updated user name");
}, 3000);
return {
getLoggedInUser: function() {
return currentLoggedInUser;
}
};
}
app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);
function ctrl($scope, loggedInUser) {
var vm = this;
$scope.$watch(function() {
return loggedInUser.getLoggedInUser();
}, function() {
vm.loggedInUserName = loggedInUser.getLoggedInUser();
console.log("Inside Watch");
},true);
}
但是 .. 如果你想改用 SetTimeout 函数:
BUT .. IF YOU WANT TO USE instead SetTimeout function:
// Code goes here
var app = angular.module("app", []);
app.factory("loggedInUser", ["$rootScope",loggedInUser]);
function loggedInUser($rootScope) {
var currentLoggedInUser = undefined;
setTimeout(function() {
$rootScope.$apply(function(){
currentLoggedInUser = "Karthik";
console.log("Updated user name");
});
}, 3000);
return {
getLoggedInUser: function() {
return currentLoggedInUser;
}
};
}
app.controller("ctrl", ["$scope", "loggedInUser", ctrl]);
function ctrl($scope, loggedInUser) {
var vm = this;
$scope.$watch(function() {
return loggedInUser.getLoggedInUser();
}, function() {
vm.loggedInUserName = loggedInUser.getLoggedInUser();
console.log("Inside Watch");
},true);
}
这篇关于$watch 未检测到服务变量的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！