在Angular.js中绑定服务变量
Binding Service Variables in Angular.js
我试图建立一个登录模式,将更新模板(只是基本的用户信息-头像,名称等)跨不同的控制器。大致按照这个例子,我的方法是在我的部分中直接绑定服务变量,像这样:
部分:<div ng-controller="TopBarControl">
<span>{{ userService.getInfo() }}</span>
</div>
服务:.service('userService', function($http) {
this.userInfo = {
isLogged: false
}
this.getInfo = function() {
return this.userInfo;
}
this.loginInit = function(userName, password) {
$http.get('http://example.com/?json=get_nonce&controller=auth&method=generate_auth_cookie').success(
function(data, status, headers, config) {
var nonce = data.nonce;
$http.get('http://example.com/?json=auth/generate_auth_cookie&nonce='+nonce+'&username='+userName+'&password='+password).success(function(data, status, headers, config) {
if (data.status == 'ok') {
this.userInfo = [
{isLogged: true},
{username: data.user.username},
{firstName: data.user.firstname},
{lastName: data.user.lastname},
{avatar: data.user.avatar}
];
return userInfo;
}
/* handle errors and stuff*/
});
}
})
控制器:
.controller('TopBarControl', function($scope, $modal, userService) {
$scope.userService = userService;
$scope.openLogin = function() {
var modalInstance = $modal.open({
templateUrl: 'views/modal.html',
controller: ModalInstanceCtrl,
size: 'lg'
});
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance, userService) {
$scope.login = function () {
userService.loginInit(this.userName, this.password);
};
$scope.ok = function () {
$modalInstance.close($scope.returnResolveVariable);
};
};
登录成功了。数据被发送到服务器,正确的数据被成功带回应用程序。双向绑定排序工作-每次有一个变化,模板回调到.getInfo()
并吐出userInfo
的值。问题是userInfo的值永远不会改变。我不能弄清楚如果它的东西奇怪我如何设置变量在loginInit
或如果有一些东西,我根本不了解服务如何处理这样的变量。
这是你使用的'this'关键字。第一次设置this.userinfo
时,"this"关键字的上下文与$http处理方法中的"this"上下文不同。
做这样的事情,捕获'this'关键字的原始上下文,以便以后使用它:
.service('userService', function($http) {
var self = this;
this.userInfo = {
isLogged: false
};
this.getInfo = function() {
return this.userInfo;
};
this.loginInit = function(userName, password) {
$http.get('http://example.com/?json=get_nonce&controller=auth&method=generate_auth_cookie').success(
function(data, status, headers, config) {
var nonce = data.nonce;
$http.get('http://example.com/?json=auth/generate_auth_cookie&nonce='+nonce+'&username='+userName+'&password='+password).success(function(data, status, headers, config) {
if (data.status == 'ok') {
self.userInfo = [
{isLogged: true},
{username: data.user.username},
{firstName: data.user.firstname},
{lastName: data.user.lastname},
{avatar: data.user.avatar}
];
return userInfo;
}
/* handle errors and stuff*/
});
};
});
在上面的代码中,userInfo变量将被限定在$http调用返回时的内联处理函数中。
理解'this'关键字是相当棘手的,这看起来像一个很好的介绍'http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/',虽然我倾向于不使用它,并使用揭示模块模式为我的服务,这摆脱了这种混乱,看到这里的一个例子
相关文章:
- 在一个控制器中更新服务变量,并在另一个控制器 - Angular JS中使用更新的值
- 服务变量分配了数据,但在访问时始终未定义
- Angularjs自定义服务变量未被$http成功定义
- 使用服务变量的 angularJS
- 所有控制器模板中的 Angularjs 服务变量
- AngularJS:在回调中设置私有服务变量
- AngularJS在diff控制器的方法上更新服务变量
- 发布绑定/监视两个控制器之间共享的服务变量
- 服务变量未更新Angular JS中的指令
- AngularJS:将服务变量绑定到控制器上的值's$范围
- Wavemaker 7中的服务变量事件
- AngularJS -服务变量是未定义的
- Angular 2:更新服务变量和视图
- AngularJS:控制器变量绑定到服务变量后没有更新
- Angular工厂服务变量创建机制
- 在Angular.js中绑定服务变量
- 将服务变量绑定到控制器AngularJS
- AngularJS:服务变量更改不应用
- 使用ControllerAs语法绑定服务变量,不带$scope
- 根据服务变量修改CSS