AngularJS $ scope drop

Question

Я надеюсь, что кто-то может помочь мне разобраться в раздражающей проблеме, которую я испытываю с $scope в AngularJS. Пожалуйста, ознакомьтесь с комментариями в моем коде ниже:

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. $ On ('$ viewContentLoaded' вызывается при загрузке содержимого представления, поскольку вы не можете предсказать, какой порядок они будут срабатывать, но это может произойти до того, как ваш HTTP-вызов завершится, чтобы свойство данных еще не установлен.

Ваш контроллер не должен иметь понятия DOM, поэтому вы не должны в любом случае вызывать document.getElementById. Если у вас есть привязка в вашем представлении, он будет обновляться с помощью области. {data.MyObject.Property}} в вашем представлении, и когда ваша функция обратного вызова успеха обновит область действия, которая волшебным образом появится в привязке к представлениям. Вот как вы должны делать вещи в Угловом.