$ watch未检测到服务变量的更改 [英] $watch not detecting changes in service variable
本文介绍了$ 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="angularjs@1.5.8" 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(外部角度事件).. $ 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未检测到服务变量的更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
