AngularJS-如何公开服务属性
我很难从角度服务中暴露属性。在下面的示例中,我公开了AngularJS-如何公开服务属性,angularjs,angularjs-service,Angularjs,Angularjs Service,我很难从角度服务中暴露属性。在下面的示例中,我公开了authService中的两个属性:isAuthenticated和user。但是,当经过身份验证后发生更改时,家庭控制器不会拾取它。有人能帮我理解我哪里出了问题吗 (function() { 'use strict'; // Define the 'app' module angular.module('app', []); // Use the 'app' module angular
authService
中的两个属性:isAuthenticated
和user
。但是,当经过身份验证后
发生更改时,家庭控制器不会拾取它。有人能帮我理解我哪里出了问题吗
(function() {
'use strict';
// Define the 'app' module
angular.module('app', []);
// Use the 'app' module
angular
.module('app')
.controller('LoginController', LoginController)
.controller('HomeController', HomeController)
.factory('authService', authService);
// ----- LoginController -----
LoginController.$inject = ['authService'];
function LoginController(authService) {
var vm = this;
vm.username = null;
vm.password = null;
vm.login = login;
function login() {
authService.login(vm.username, vm.password);
}
}
// ----- HomeController -----
HomeController.$inject = ['$scope', 'authService'];
function HomeController($scope, authService) {
var vm = this;
vm.user = null;
$scope.$watch(
function() { return authService.isAuthenticated; },
function() {
console.log('HomeController: isAuthenticated changed');
vm.user = authService.user;
}
);
}
// ----- authService -----
function authService() {
var isAuthenticated = false;
var user = { username: 'jdoe', location: 'Dreamland' };
var service = {
login: login,
isAuthenticated: isAuthenticated,
user: user
};
return service;
function login(username, password) {
user = {
username: username,
location: 'Boston'
};
isAuthenticated = true;
console.log('authService: isAuthenticated changed');
}
}
})();
以下是index.html文件:
<!DOCTYPE html>
<html data-ng-app="app" ng-strict-di>
<head>
<meta charset="utf-8">
<title>AngularJS Minimal Template</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div ng-controller="LoginController as vm">
<form name="loginForm" ng-submit="vm.login()">
<label>Username: </label>
<input type="text" name="username" ng-model="vm.username">
<label>Password: </label>
<input type="password" name="password" ng-model="vm.password">
<button type="submit">Login</button>
</form>
</div>
<div ng-controller="HomeController as vm">
<h1>{{vm.user.username}}</h1>
<h2>{{vm.user.location}}</h2>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
AngularJS最小模板
用户名:
密码:
登录
{{vm.user.username}
{{vm.user.location}
而不是这样做
var service = {
login: login,
isAuthenticated: isAuthenticated,
user: user
};
var service = {
login: login,
isAuthenticated: function() { return isAuthenticated; },
user: function() { return user; }
};
试着这样做
var service = {
login: login,
isAuthenticated: isAuthenticated,
user: user
};
var service = {
login: login,
isAuthenticated: function() { return isAuthenticated; },
user: function() { return user; }
};
然后需要将其作为函数调用,而不是作为值调用。这将检查isAuthenticated
值,并在每次调用service.isAuthenticated()
时返回该值。您应该对user
执行同样的操作。执行此操作时,应调用service.user()
var service = {
login: login,
isAuthenticated: isAuthenticated,
user: user
};
function login(username, password) {
user = {
username: username,
location: 'Boston'
};
isAuthenticated = true;
console.log('authService: isAuthenticated changed');
}
您正在创建登录
、已验证
和用户
的副本(尽管用户
是对同一对象的引用)
然后,当您执行此操作时:
var service = {
login: login,
isAuthenticated: isAuthenticated,
user: user
};
function login(username, password) {
user = {
username: username,
location: 'Boston'
};
isAuthenticated = true;
console.log('authService: isAuthenticated changed');
}
您正在将本地用户
变量重新分配给新对象,并且本地已验证
变量将被分配给真
。您的服务
对象仍然引用这些变量的旧值
解决这一问题最直接的方法是直接分配给您的服务变量:
function login(username, password) {
service.user = {
username: username,
location: 'Boston'
};
service.isAuthenticated = true;
console.log('authService: isAuthenticated changed');
}
这样,服务变量将被更新,并且应该反映在使用服务的任何地方。在这个场景中,您不再需要局部变量——服务对象已经包含了它们。对私有的、未公开的变量使用局部变量。service.isAuthenticated=true,而不是那样。布尔值是按值传递的,而不是引用。在初始化服务对象时,我不会将isAuthenticated设置为局部变量,而是将isAuthenticated:false设置为局部变量。然后,在登录函数中,可以将service.isAuthenicated设置为true,并在服务中返回该单例对象。在JS中,函数被提升到顶部,这意味着在解释代码时,var isAuthenticated=false位于login函数之后。这可能会给你带来麻烦。谢谢,@Mindastic。这解决了一个问题。$watch现在正在工作,只要经过身份验证
发生更改,就会调用它。但是,authService.user
不会拾取用户的新值。它仍然具有初始值(jdoe/Dreamland)。我尝试将var服务更改为user:function(){return user;}
,但这没有帮助。对于用户,您应该执行大致相同的操作。检查我的更新答案。不幸的是,这不起作用。我编辑了我之前的评论,想说,你可能没有读过编辑后的版本。不管怎样,看看@Agop的答案,这很有效。就像一个符咒!非常感谢。“您正在创建登录、已验证和用户的副本”-不是真的。这些只是作业。您不能复制false
@zeroplagl是的。我的意思是,例如,service.isAuthenticated
成为isAuthenticated
的副本-尽管两者都与false
相同,service.isAuthenticated
是isAuthenticated
的副本,因为isAuthenticated
可以在不影响service.isAuthenticated
的情况下进行更改。