AngularJSの "page load"でUIが更新されない

Question

私はAngular 1.4.3を使用したプロジェクトを持っています。いずれかのページでは、グリッドから値を選択してから、そのレコードの詳細を別のページに表示します。詳細ページの「ページ読み込み」中に、私はサービスに行き、データベースから値を取得します。結果がデータベースとサービスから戻ってくるのを確認してから、適切な変数を設定することができますが、UIは適切な値で更新されません。いくつかの研究をして、$ scope。$ apply（）と$ timeout（）関数の使用について言及しましたが、私はそれに成功していません。

ページの読み込み時にUIを更新するために行うべきことはありますか？

Answer 1

のは、次の2つのコントローラを持って言ってみましょう：

 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内のテンプレートの変更ではなく、見るであろう親のためのもの。それは決して変化しません。 1つの解決策は、$ scope。$ parent.name = data.nameを使用することです。

いわゆるスコープスープが問題の原因かもしれません。それを固定する他の方法があります。コードなしでは、それは推測するには非常に広い領域です。