2015-02-09 57 views
0

我有一個非常簡單的應用程序,它包含一個POST數據的輸入表單和一個已經在同一頁上提交的項目列表。Angular:將HTTP請求數據加載到沒有ng-init的控制器中

我想填充這個表中的項目,這些項目在頁面加載時已經使用$ 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的點。

回答

1

您可以直接打電話給你的init控制器內部的功能?

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

    } 

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

再加上只會出現在整個應用程序/這似乎破壞使用routeProvider點的單一路徑。

是和否,你也可以用它來表示你的應用程序正在加載。例如,如果你使用的用戶界面的路由器,你可以做一些事情,因爲這:

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'; 
     } 
     } 
    }); 
}); 

現在,當您導航到/啓動路線時MyObj中解決您的頁面纔會呈現。這也可以是一個承諾。

已解決的數據在您的控制器中可用作您使用的名稱。在這種情況下,myObj

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

謝謝 - 我想我遇到的主要問題是它正在渲染一個死的模板,直到數據解決。 – cejast 2015-02-09 15:56:52

0

如果我理解正確的話,而不是在你的HTML添加NG-的init =「的init()」,只需調用init函數的控制器內是這樣的:

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