如何$ watch currentUser服务查看我的导航控制器中的更改? [英] how to $watch currentUser service for changes in my nav controller?
问题描述
我有一个带有"nav"控制器的导航栏，该控制器显示当前用户的图像.但是，如果用户更新个人资料照片，我将无法更改导航图像.
I have a have navbar with a "nav" controller, which displays the current user's image. However, i'm not able to get the nav image to change if the user updates their profile photo.
这是我的服务:
'use strict';
angular.module('clientApp').factory('Account', function ($http, toastr) {
var currentUser = null;
function getUser(callback, user) {
console.log('get user user ', user)
// if the user has already been retrieved then do not do it again, just return the retrieved instance
if (currentUser !== null && currentUser !== user) {
callback(currentUser);
}
if (currentUser === null) {
// retrieve the currentUser and set it as a property on the service
$http.get('/api/me').then(function (res) {
// set the result to a field on the service
currentUser = res.data;
// call the callback with the retrieved user
callback(currentUser);
});
}
}
//updates the currentUser variable
function updateProfile(profileData, callback) {
console.log('profile data ', profileData);
$http.put('/api/me', profileData).then(function (res) {
currentUser = res.data;
callback(currentUser);
}).catch(function (response) {
if (response.data.message.length) {
for (var i = 0; i < response.data.message.length; i++) {
toastr.error(response.data.message[i]);
}
}
});
}
return {
getUser: getUser,
updateProfile: updateProfile
};
});
导航器中的观察者:
$scope.user = {};
//watches for currentUser changes in account service
$scope.$watch(Account.getUser(function(user){}, $scope.user), function (newValue, oldValue) {
console.log('user update watch', newValue)
$scope.user = newValue;
});
我在这里显然使我感到困惑.我正在查看$ watch上的信息，但是它没有按我预期的那样工作.
I'm obviously confusing something here. I'm reviewing information on $watch, but this is not working as I expected. Perhaps because Account.getUser doesn't return anything for the $watch to compare, and instead uses a callback..
如果有人能指出我要去哪里错了，我将不胜感激.
If anyone could point where i'm going wrong -- much appreciated.
推荐答案
对于不使用 $ watch 的人来说，不需要传递回调函数，因为您总是可以返回对呼叫者的承诺.
For one you are not using $watch quite right, you don't need to pass in callback functions because you can always return promises to the caller.
考虑以下示例，其中 NavCtrl 监听 currentUser 中的更改，该更改在 userService 中保存并在控制器之间共享. MainCtrl 是您在其中调用服务以获取用户(模仿登录名或类似内容)的地方.
Consider following example where NavCtrl listens to changes in currentUser, which is kept, and shared among controllers, in your userService. MainCtrl is where you call the service to fetch the user (mimicking login or similar).
当用户未知或未更改时，可以使用 $ q 从服务中返回用户信息，或者在需要更新时使用 $ http 返回用户信息.这些都兑现了诺言.
When user is not known or is not changed, you can return user information from service using $q or when it needs to update, using $http. These both return promises.
HTML
<body>
<!-- nav bar -->
<div ng-controller="NavCtrl">
Nav
<div ng-bind="user.name"></div>
</div>
<br>
<!-- content -->
<div ng-controller="MainCtrl">
Main
<div ng-bind="'User cached: ' + !!isCached"></div>
<br>
<input type="button" ng-click="getUser()" value="Get">
</div>
</body>
JavaScript
angular.module('app', [])
.controller('NavCtrl', function($scope, userService) {
var unwatch = $scope.$watch(function() {
return userService.currentUser;
}, function(user) {
$scope.user = user || { name: 'No user' };
});
$scope.$on('$destroy', unwatch);
})
.controller('MainCtrl', function($scope, userService) {
$scope.getUser = function() {
var id = Math.floor((Math.random() * 10) + 1); // 1...10
userService.getUser(id).then(function(user) {
$scope.isCached = user.cached;
});
};
})
.factory('userService', function($q, $http) {
var userService = {
currentUser: null,
getUser: function(id) {
if (userService.currentUser && userService.currentUser.id === id) {
userService.currentUser.cached = true;
return $q.when(userService.currentUser);
} else {
var url = 'https://jsonplaceholder.typicode.com/users/' + id;
return $http.get(url).then(function(response) {
userService.currentUser = response.data;
return userService.currentUser;
})
}
}
};
return userService;
});
此处的相关监听器 https://plnkr.co/edit/DzfAtI
这篇关于如何$ watch currentUser服务查看我的导航控制器中的更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
