Question

我使用$ http.get（）从文件中读取json数据，并将readed数据分配给另一个范围变量。但问题是首先将值分配给scope变量，然后调用success函数。

控制器

var app = angular.module("myapp", []);
    app.controller('MyControl', function ($scope, $http) {

        var $config = {
            url: 'CriticalPath.json',
            method: 'GET',
            async: true,
            transformResponse: function (value) {
                return $.parseJSON(value, true, true);
            }
        }

        $scope.myData = [];
        $http($config).success(
            function (response) {
                $scope.myData = response;
            });

        $scope.Options = {
            DataSource: 'myData',
        };
    });

我们想首先调用成功函数

帮我解决这个问题

Answer 1

正如我在评论中提到的，当您的浏览器解析控制器时，您的响应数据不可用。这就是你的$ scope对象没有填充数据的原因......

一个简单的解决方案是将您的DataSource对象移动到成功方法中。我也重构了你的代码。

不污染全球范围也是一种很好的做法。通过将代码包装在一个立即调用的函数表达式（IIFE）中来避免此问题。

这是一个有效的解决方案（http://jsfiddle.net/afgyvt6j）：

(function () {
    var app = angular.module("myapp", []);
    app.controller('MyControl', function ($scope, $http) {

        // don't add $ to variables, that is a bad practice
        var config = {
            url: 'https://api.github.com/users/mralexgray/repos',
            method: 'GET',
            // async: true, not need (default value is true)
            transformResponse: function (value) {
                // when possible, use angular api methods 
                return angular.fromJson(value);
            }
        };

        $http(config).success(function (response) {
            $scope.options = {
                DataSource: response
            };
        });

    });
})();

您的模板可能如下所示：

<div ng-controller="MyControl">
    <pre>{{options.DataSource | json}}</pre>
</div>

AngularJs：$ http.get（）无法正常工作

1 个答案: