AngularJS의 "페이지로드"에서 UI가 업데이트되지 않음

Question

각도 1.4.3을 사용하는 프로젝트가 있습니다. 페이지 중 하나에서 그리드에서 값을 선택하고 다른 페이지에 해당 레코드의 세부 정보를 표시합니다. 세부 정보 페이지의 "페이지로드"가 진행되는 동안 서비스로 이동하여 데이터베이스에서 값을 가져옵니다. 나는 결과가 데이터베이스와 서비스에서 돌아온 것을 알 수 있으며 적절한 변수를 채우지 만 UI는 적절한 값으로 업데이트되지 않는다. 몇 가지 조사를 해보면 $ scope. $ apply()와 $ timeout() 함수가 언급되었지만 나는 그 어떤 성과도 내지 못하고있다.

페이지를로드하는 동안 UI를 새로 고치려면 수행해야 할 것이 있습니까?

Answer 1

의 당신이 두 개의 컨트롤러를 가지고 있다고 가정 해 봅시다 :

 var app = angular.module('plunker', []); 

     app.controller('MainCtrl', function($scope) { 
      $scope.name = 'World'; 
      $scope.another = 'AnotherWorld'; 
     }); 

     app.controller('AnotherCtrl', function($scope) { 
     }); 

및 템플릿 :

 <div ng-controller="MainCtrl"> 
       <p>{{name}}</p> 
       <div ng-controller="AnotherCtrl"> 
      <p>{{name}}</p> 
      <p>{{another}}</p> 
       </div> 
      </div> 

이름과 다른이 템플릿에 신속하게 업데이트를 참조해야 아이의 범위에 부모로부터 상속됩니다.

현재 서비스 소개 : 서로 이름을 업데이트,

 app.service('OnlyAService', function($q, $timeout){ 
      return { 
       getNewValue: getNewValue 
      } 

      function getNewValue() { 
      var deferred = $q.defer(); 
      $timeout(function(){ 
       deferred.resolve({name: 'NewCrapReplacedWorld', another: 'NewCrapReplacedAnotherWorld'}); 
      }, 2000); 

      return deferred.promise; 
      } 
     }); 

이 AnotherCtrl에 서비스를 주사를

 app.controller('AnotherCtrl', function($scope, OnlyAService) { 
      OnlyAService.getNewValue().then(function(data){ 
      $scope.another = data.another; 
      $scope.name = data.name; 

      }); 
     }); 

당신은 템플릿 변경에 AnotherCtrl 내의 다른 이름 것을 볼 수 있지만 것 부모를위한 것. 결코 변하지 않을 것입니다. 하나의 해결책은 $ scope. $ parent.name = data.name을 사용하는 것입니다.

소위 스코프 스프가 문제의 원인 일 수 있습니다. 그것을 고치는 다른 방법이 있습니다. 코드가 없으면 추측 할 수있는 영역이 매우 넓습니다.