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'，函数（$ scope，$ routeParams，$ http，$ timeout）{ $ 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返回一个promise，并且在http调用解析了该promise之后，您的成功函数才会运行。这是异步的，需要一段时间才会发生，因为代码会调用服务器。

$ scope。$ on（'viewContentLoaded'在加载视图内容时被调用，看到你无法预测这些命令将会触发，但这很可能在你的http调用完成之前发生，因此数据属性没有还没有确定。

你的控制器应该没有DOM的概念，所以你不应该在那里调用document.getElementById。如果您的视图中有绑定，它将使用范围进行更新。在您的视图中放置{{data.MyObject.Property}}，当您的成功回调函数更新范围时，它将神奇地出现在视图绑定中。这就是你应该如何在Angular中做事。

AngularJS $范围正在下降

2 个答案: