綁定Angular.js中的服務變量

Question

我試圖建立一個登錄模式，它將跨不同的控制器更新模板（只是基本的用戶信息-化身，名稱等）。 松散地遵循此示例 ，我的方法是將服務變量直接綁定到我的局部變量中，如下所示：

部分：

<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設置變量是不是很奇怪，或者對於服務如何處理此類變量我根本不了解。

Answer 1

這是您對“ 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*/     
        }); 
    };
});

在上面的代碼中，在$ http調用返回時，userInfo變量的作用域將成為內聯處理程序函數。

理解'this'關鍵字非常棘手，這看起來像是一個很好的介紹' http://javascriptissexy.com/understand-javascripts-this-with-clarity-and-master-it/ '盡管我傾向於不使用它並使用我的服務的顯示模塊模式擺脫了這種混亂，請參見此處的示例