угловой js: два контроллера совместно с асинхронными данными

Question

Мне сложно объяснить мою проблему, но я постараюсь сделать все возможное.
У меня есть форма с контроллером A и директива с ng-transclude с контроллером B.
Когда я запускаю скрипт, я отправляю параметр ID, и я вызываю службу, которая создает $ http.get. Я дал обещание

контроллер A:

if($routeParams.id){ 
    formFunc.get($routeParams.id).then(
     function (data){ 
     this.data = data; 
     console.log("1"+this.data); 
     } 
    ); 
} 
console.log("2"+this.data); 

контроллер B:

this.fields = $scope.data.fields; 
console.log("3"+$scope.data.fields); 

Я имею в консоли: 2 неопределенными -> 3 не определено -> 1 Объект
Так я получить хорошо данные в контроллере A, но без привязки к контроллеру B.
Данные являются объектом {"fields": {...}, "title": ...}

Надеюсь, что проблема понятна

Answer 1

Во-первых, вы должны понимать, что $ scope является локальным для каждого контроллера.

Чтобы поделиться данными между контроллерами, вы можете использовать службы или события.

• Использование службы набор данных от вас контроллера A.

  if($routeParams.id){ 
  formFunc.get($routeParams.id).then(
      function (data){ 
      this.data = data; 
      console.log("1"+this.data); 
      fromFunc.setData(data); // <---- better, do the setting inside fromFunc, just to show you 
      }); 
  } 
  

• часы для изменений в этой службе от контроллера B

  $scope.$watch(
      function(){ 
       return fromFunc.getData(); 
      }, 
  
      function(newValue, oldValue){ 
      if(oldValue !== newValue){ 
       $scope.data = newValue; // <----- getting the data from service when data changes. 
      } 
  })