在Angular.js中绑定服务变量

Binding Service Variables in Angular.js

本文关键字:服务 变量 绑定 Angular js      更新时间:2023-09-26

我试图建立一个登录模式,将更新模板(只是基本的用户信息-头像,名称等)跨不同的控制器。大致按照这个例子,我的方法是在我的部分中直接绑定服务变量,像这样:

部分:

<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/',虽然我倾向于不使用它,并使用揭示模块模式为我的服务,这摆脱了这种混乱,看到这里的一个例子