Angular：在没有ng-init的情况下将HTTP请求数据加载到控制器中

Question

我有一个非常简单的应用程序，其中包含一个用于输入一些数据的输入表单，以及一个表，其中包含已在同一页面上提交的项目列表。

我正在尝试使用页面加载时已使用$ http请求添加的项目填充此表。

目前，我的index.html如下：

    <div id="container">

        <div id="form-container" ng-controller="inputFormController">
            <form id="form" ng-submit="submit()">
                //input fields
            </form>
        </div>

        <hr>

        <div id="table-container" ng-controller="blacklistTableController" ng-init="init()">
            <table>
                //ng-repeat rows
            </table>
        </div>

    </div>

如您所见，我目前正在使用ng-init将数据预加载到表中，该方法可以正常工作，尽管我认为这是阅读文档后的不正确方法。

我已经研究过使用通过routeProvider的解析将数据加载到blacklistTableController中，尽管据我了解（如果我错了，请更正我）这不能用于将数据注入到页面上已经存在的控制器中，此外只是整个应用程序在/处的一条路由，似乎无法使用routeProvider。

Answer 1

您可以在控制器内部调用init函数吗？

angular.module('app').controller('blacklistTableController', function ($scope) {
   $scope.init = function () { 

   }

   // Call on startup
   $scope.init();
});

另外，整个应用程序在/的位置只有一条路由，这似乎使使用routeProvider失去了意义。

是和否，您还可以使用它来指示您的应用程序正在加载。 例如，如果您使用UI-Router，则可以执行以下操作：

angular.module('app').value('loading', {
   isLoading: false
});

angular.module('app').run(function ($rootScope, loading) {
   $rootScope.$on('$stateChangeStart', function () {
      loading.isLoading = true;
   });

   $rootScope.$on('$stateChangeSuccess', function () {
      loading.isLoading = false;
   });
});

angular.module('app').config(function ($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.default('/start');

   $stateProvider.state('start', {
      url: '/start',
      templateUrl: '/views/start.html',
      controller: 'blacklistTableController',
      resolve: {
         myObj: function () {
            // init logic
            return 'something';
         }
      }
   });
});

现在，当您导航到/ start路由时，仅当myObj解析后，页面才会呈现。 这也可以是一个承诺。

解析后的数据可以作为您使用的名称在控制器内部提供。 在这种情况下， myObj ：

angular.module('app').controller('blacklistTableController', function ($scope, myObj) {
       $scope.data = myObj; // resolved via ui-router
    });

Answer 2

如果我正确理解您的意见，而不是在HTML中添加ng-init =“ init（）”，则只需在控制器内部调用init函数，如下所示：

$scope.init = function () {
   ...
}
$scope.init();