爲什麼在控制器間共享數據在AngularJS中不起作用

Question

我想構建一個簡單的用戶名登錄系統。這只是爲了記錄我可以在我的各種控制器中使用的用戶名。

但是，出於某種原因，我無法在abcController

這個問題的實質是在控制器之間共享數據得到$scope.userName值。

controller.js

app.controller('userNameController',function ($scope, $log, Config, Session) 
{ 
    Session.updateSession($scope.userName); 
}); 

app.controller('abcController',function ($scope, $log, Config, Session) 
{ 
    $scope.userName=Session.data.username; 
    //some other code 
}); 

resource.js

app.factory('Session', function() { 
    var Session = { 
     data: {}, 
     updateSession: function(userName) { 
      Session.data = { "username": userName } 
     } 
    }; 
    return Session; 
}); 

只要用戶點擊登錄按鈕Twitter的引導模式（彈出）將出現，並詢問用戶輸入他們的用戶名。

的index.html

<div ng-controller="userNameController"> 
<button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button" class="btn" data-toggle="modal" title="Enter Username">Login</button> 
</div> 

    <!-- UserName Modal --> 
    <div id="userNameModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel" aria-hidden="true"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="userNameModalLabel">Enter your username</h3> 
     </div> 
     <div class="modal-body"> 
      <p><b>UserId</b></p> 
      <div class="input-append"> 
       <input class="pull-left" id="userIdTextBox" type="text" style="left:8px; width:160px" ng-controller="userNameController" ng-model="userName"> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" data-dismiss="modal" aria-hidden="true">Submit</button> 
     </div> 
    </div> 

請隨時提出，如果有更好的方法做什麼，我想上面做。

Answer 1

如果你像這樣定義你的資源有幫助嗎？

app.factory('Session', function() { 
    var Session = { 
     data: { username: undefined }, // ensure object ref to attach to 
     updateSession: function(userName) { 
      Session.data.username = userName; // do NOT recreate the object above 
     } 
    }; 
    return Session; 
}); 

我認爲可能發生的情況（我不能看到所有的代碼），但我不認爲當你在abcController參考username設置。通過首先定義abcController可以附加到的對象模式中的共享引用，它將在稍後調用updateSession（）時反映更改。

這是一個工作example使用你的服務理念。

Answer 2

我發現使用emit和broadcast的備用解決方案。在此jsfiddle

完整的代碼示例app.js

app.run(function($rootScope) { 
    /* 
    Receive emitted message and broadcast it. 
    Event names must be distinct or browser will blow up! 
    */ 
    $rootScope.$on('handleEmit', function(event, args) { 
     $rootScope.$broadcast('handleBroadcast', args); 
    }); 
}); 

controller.js

app.controller('userNameController',function ($scope, $log, Config) 
{ 

    $scope.submitUserName= function() 
    { 
     // Session.updateSession($scope.userName); 
     $scope.$emit('handleEmit', {username: $scope.userName}); 
    }; 

}); 

app.controller('abcController',function ($scope, $log, Config) 
{ 
    $scope.$on('handleBroadcast', function(event, args) { 
     $scope.userName = args.username; 
     }); 
    //some other code 
});