AngularJS $ scope dropping

Question

私はAngularJSで$scopeを持っている厄介な問題を誰かが理解できるように助けてくれることを願っています。以下のコード内のコメントを参照してください。

app.controller('MyController', function ($scope, $routeParams, $http, $timeout) { 
    $scope.id = $routeParams.id; 

    $http.get("http://server/api/Blah/GetData/" + $scope.id).success(function (data) { 
     $scope.data = data; 
     alert($scope.data.MyObject.Property); //displays the expected value. - Not Undefined or null 
    }).error(function (data) { 
     alert(data); 
    }); 

    $scope.$on('$viewContentLoaded', function() { 
     $timeout(function() { 
      var d = document.getElementById("iframe"); 

      d.contentDocument.documentElement.innerHTML = $scope.data.MyObject.Property; //Now MyObject is magically undefined.   

     }, 0); 
    }); 
}); 

Answer 1

コードの実行タイミングを知る必要があります。

これは、いくつかのロギングと固定コードである： app.controller（ 'MyController'、関数（$範囲、$ routeParams、$ HTTP、$タイムアウト）{ $ scope.id = $ routeParams.id;

console.log(1); 

var promise = $http.get("http://server/api/Blah/GetData/" + $scope.id).success(function (data) { 
    $scope.data = data; 
    console.log(2); 
    alert($scope.data.MyObject.Property); //displays the expected value. - Not Undefined or null 
}).error(function (data) { 
    alert(data); 
}); 

$scope.$on('$viewContentLoaded', function() { 
    $timeout(function() { 
     var d = document.getElementById("iframe"); 

     console.log(3); 
     // d.contentDocument.documentElement.innerHTML = $scope.data.MyObject.Property; 

     promise.then(function() { 
      console.log(4); 
      d.contentDocument.documentElement.innerHTML = $scope.data.MyObject.Property; 
     }); 

    }, 0); 
}); 

}）;

Answer 2

$ http.getは約束を返し、その約束がhttp呼び出しによって解決されるまで成功関数は実行されません。これは非同期で、コードがサーバーを呼び出すために時間がかかります。

$ scope（$ viewContentLoadedは、ビューのコンテンツがロードされたときに呼び出され、http：//呼び出しが完了する前に発生する可能性の高いものを予測することはできません。

あなたのコントローラにはDOMの概念がありませんので、とにかくdocument.getElementByIdを呼び出すべきではありませんあなたのビューにバインディングがあれば、それはスコープで更新されます。 {data.MyObject.Property}}をビュー内に作成し、成功コールバック関数がスコープを更新すると、それはビューバインディングに魔法のように表示されます。これは角度での処理方法です。