我的app.js样子
app.js
var app = angular.module('pennytracker', [ '$strap.directives', 'ngCookies', 'categoryServices' ]); app.config(function($routeProvider) { console.log('configuring routes'); $routeProvider .when('/summary', { templateUrl: '../static/partials/summary.html'}) .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' }) });
当我app/js/services/categories.js看起来像
app/js/services/categories.js
angular.module('categoryServices', ['ngResource']). factory('Category', function($resource){ return $resource( '/categories/:categoryId', {categoryId: '@uuid'} ); });
我有一条路线
.when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })
我的控制器app/js/controllers/transactionController.js看起来像
app/js/controllers/transactionController.js
function AddTransactionController($scope, $http, $cookieStore, Category) { // some work here $scope.category = Category.query(); console.log('all categories - ', $scope.category.length); }
当我运行我的应用程序时,我看到console.log为
all categories - 0
我在这里做错了什么?
Category.query()是异步的。它立即返回一个空数组,并在响应到达时稍后从请求中添加结果- 来自http://docs.angularjs.org/api/ngResource.$resource:
Category.query()
重要的是要意识到调用$ resource对象方法会立即返回空引用(对象或数组取决于isArray)。从服务器返回数据后,将使用实际数据填充现有引用。这是一个有用的技巧,因为通常资源会分配给模型,然后由视图呈现。如果对象为空,则不会进行渲染,一旦数据从服务器到达,该对象就会被数据填充,并且视图会自动重新渲染以显示新数据。
如果需要在控制器中访问结果,则应在回调函数中执行以下操作:
$scope.category = Category.query(function(){ console.log('all categories - ', $scope.category.length); });