Question

我必须在加载页面时显示数据。为此，我应该如何将数据加载到范围内。

我可以看到三种可能性，但我的问题是我应该使用哪种方法。一种方法是否优于其他方法，或者所有三种方法都相同？

方法1：

(function () {

    angular.module('myApp').controller('myController', function ($scope, $http) {

        $scope.data = [];

        function loadData() {
            $http.get(url).success(function (response) {
                $scope.data = response;
            });
        }
        loadData();

    });

}());

方法2：

(function () {

    angular.module('myApp').controller('myController', function ($scope, $http) {

        $scope.data = [];

        $scope.init = function () {
            $http.get(url).success(function (response) {
                $scope.data = response;
            });
        };

    });

}());

并在视图中绑定init（）。

<div ng-controller="myController" ng-init="init()">

方法3：

(function () {

    angular.module('myApp').controller('myController', function ($scope, $http) {

        $scope.data = [];

        angular.element(document).ready(function () {
            $http.get(url).success(function (response) {
                $scope.data = response;
            });
        });
    });
}());

还有其他办法可以做我想做的事吗？

Answer 1

方法1 - 这是最佳选择。您的加载数据逻辑具有自己的功能，因此如果您需要在任何时候重新加载数据，可以轻松再次调用它。保持功能可重用。您应该使用Promise的then()和catch()方法来处理成功和失败。

angular.module('myApp').controller('myController', function ($scope, $http) {

    $scope.data = [];

    function loadData() {
        $http.get(url)
            .then(function (response) {
                $scope.data = response;
            })
            .catch(function(error) {
                $scope.error = error;
            });
    }

    loadData();
});

方法2 - 这应该可以正常工作，但缺点是在查看控制器时init()的调用方式并不清楚。

方法3 - 这应该会有效，但angular.element(document).ready()调用是不必要的，会让您的代码更加混乱。获取数据的逻辑也不再是可重用的，而是它自己的功能。

Answer 2

据我所知DOMContentLoaded上的角度引导，所以不需要.ready()。

另外，我发现ng-init是冗余的，控制器应初始化视图的值。

所以我猜第一个是幸运的赢家。

Answer 3

第一种方式很好，但你应该＆＃39;然后＆＃39;没有成功＆＃39;。通常也可以省略初始化变量。

(function () {

    angular.module('myApp').controller('myController', function ($scope, $http) {
        function loadData() {

            $http.get('q.html').then(function (response) {
                $scope.data = response.data;
            }, function(error) {
                //handle
            });
        }
        loadData();

    });

}());

如何在页面加载时将数据加载到作用域

3 个答案: