[英]Angular: Loading HTTP request data into a controller without ng-init
I have a very simple app which consists of an input form to POST some data, and a table with a list of items that have already been submitted on the same page. 我有一个非常简单的应用程序,其中包含一个用于输入一些数据的输入表单,以及一个表,其中包含已在同一页面上提交的项目列表。
I'm trying to populate this table with the items that have already been added using a $http request upon page load. 我正在尝试使用页面加载时已使用$ http请求添加的项目填充此表。
Currently my index.html is as follows: 目前,我的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>
As you can see I am currently preloading the data into the table using ng-init, which works, although I believe this is the incorrect way of doing it after reading the documentation. 如您所见,我目前正在使用ng-init将数据预加载到表中,该方法可以正常工作,尽管我认为这是阅读文档后的不正确方法。
I've looked into loading the data into blacklistTableController using a resolve through routeProvider, although from my understanding (please correct me if I'm wrong) this can't be used to inject data into a controller already on the page, plus there will only be a single route for the whole app at / which seems to defeat the point of using routeProvider. 我已经研究过使用通过routeProvider的解析将数据加载到blacklistTableController中,尽管据我了解(如果我错了,请更正我)这不能用于将数据注入到页面上已经存在的控制器中,此外只是整个应用程序在/处的一条路由,似乎无法使用routeProvider。
You can just call your init function inside your 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. 另外,整个应用程序在/的位置只有一条路由,这似乎使使用routeProvider失去了意义。
Yes and no, you could also use this to indicate that your application is loading. 是和否,您还可以使用它来指示您的应用程序正在加载。 For instance if you use UI-Router, you could do something as this: 例如,如果您使用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';
}
}
});
});
When you now navigate to the /start route your page will only render when myObj is resolved. 现在,当您导航到/ start路由时,仅当myObj解析后,页面才会呈现。 This can also be a promise. 这也可以是一个承诺。
The resolved data is available inside your controller as the name you've used. 解析后的数据可以作为您使用的名称在控制器内部提供。 In this case myObj
: 在这种情况下, myObj
:
angular.module('app').controller('blacklistTableController', function ($scope, myObj) {
$scope.data = myObj; // resolved via ui-router
});
If I understand you correctly, rather than adding ng-init="init()" in your HTML, just call the init function inside your controller like this: 如果我正确理解您的意见,而不是在HTML中添加ng-init =“ init()”,则只需在控制器内部调用init函数,如下所示:
$scope.init = function () {
...
}
$scope.init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.