javascript - Angular : Loading HTTP request data into a controller without ng-init

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中，尽管根据我的理解(如果我错了，请纠正我)，这不能用于将数据注入(inject)到页面上已有的 Controller 中，另外，整个应用程序在/处只有一条路由，这似乎违背了使用 RouteProvider 的意义。

Answer 1

您可以在 Controller 内调用 init 函数吗？

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

   }

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

plus there will only be a single route for the whole app at / which seems to defeat the point of using 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 解析时呈现。这也可以是一个 promise 。

解析后的数据可在您的 Controller 中以您使用的名称使用。在本例中 myObj:

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