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();