Question

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

我正在尝试使用页面加载时使用$ 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

如果我理解正确，而不是添加ng-init =＆＃34; init（）＆＃34;在HTML中，只需调用控制器内的init函数，如下所示：

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

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

2 个答案: