Почему обмен данными между контроллерами не работает в AngularJS

Question

Я пытаюсь создать простую систему входа имени пользователя. Это просто запись имени пользователя, которое я могу использовать в разных контроллерах.

Но, по некоторым причинам, я не могу получить $scope.userName значение в abcController

Суть этой проблемы обмена данными между контроллерами.

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; 
}); 

Как только пользователь нажимает на кнопку Войти щебетать-самозагрузки модальной (всплывающее окно) будет появляться и спрашивать пользователя для ввода имени пользователя.

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; 
}); 

Я думаю, что может происходить (и я не могу увидеть весь код), но я не думаю, что username устанавливается, когда вы берете ссылку в abcController. Определив общую ссылку в вашей схеме объектов, которую сначала можно подключить 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 
});