Угловое: делиться асинхронными данными службы между контроллерами

Question

Я хотел бы «привязать изменение» асинхронных данных между контроллерами.

Я знаю, что это, вероятно, немного запутанно, но я надеюсь, что что-то возможно.

В следующем примере, если я пишу что-то в качестве входных данных, он прекрасно работает: http://jsfiddle.net/Victa/9NRS9/

HTML:

<div ng-app="myApp"> 
    <div ng-controller="ControllerA"> 
     ControllerA.message = {{message.hello}}<br/> 
     <input type="text" ng-model="message.hello"/> 
    </div> 
    <hr/> 
    <div ng-controller="ControllerB"> 
     ControllerB.message = {{message.hello}}<br/> 
     <input type="text" ng-model="message.hello"/>  
    </div> 
</div> 

JS:

angular.module('myApp', []) 
    .factory('myService', function($q, $timeout) { 
     var message = { 
      hello: 'hello world' 
     }; 
     return { 
      getMessage : function(){ 
       return message; 
      } 
     }; 
    }) 

function ControllerA($scope, myService) { 
    $scope.message = myService.getMessage(); 
} 

function ControllerB($scope, myService) { 
    $scope.message = myService.getMessage(); 
} 

---

Но скажем, я хватаю свои данные с сервера. Я хотел бы «связать» данные, как в предыдущем примере. http://jsfiddle.net/Victa/j3KJj/

Дело в том, что я бы хотел избежать использования «$ broadcast»/«$ on» или совместного использования объекта в $ rootScope.

HTML:

<div ng-app="myApp"> 
    <div ng-controller="ControllerA"> 
     ControllerA.message = {{message.hello}}<br/> 
     <input type="text" ng-model="message.hello"/> 
    </div> 
    <hr/> 
    <div ng-controller="ControllerB"> 
     ControllerB.message = {{message.hello}}<br/> 
     <input type="text" ng-model="message.hello"/>  
    </div> 
</div> 

JS:

angular.module('myApp', []) 
    .factory('myService', function($q, $timeout) { 
     var message = {}; 
     return { 
      getMessage : function(){ 
       var deferred = $q.defer(); 

       $timeout(function() { 
        message.hello = 'Hello world!'; 
        deferred.resolve(message); 
       }, 2000); 

       return deferred.promise; 
      } 
     }; 
    }) 

function ControllerA($scope, myService) { 
    $scope.message = myService.getMessage(); 
} 

function ControllerB($scope, myService) { 
    $scope.message = myService.getMessage(); 
} 

Спасибо за вашу помощь.

Виктор

Answer 1

вы возвращаете promise в объекте Верните factory «s, а не собственно сам объект. так в вас сферу, вы должны фактически ждать обещание исправиться, то конкретный объект присвоить его $scope.message

Например:

function ControllerA($scope, myService) { 
    myService.getMessage().then(function(obj){ 
       $scope.message=obj 
      }); 
} 

я изменил вашу скрипку в то, что может быть ваш ответ, см this скрипку