Angular 如何正确使用工厂返回的数据
Angular How to properly use a factory returned data
我有一家工厂使用 $resource
进行 HTTP
调用。
工厂代码:
.factory('me', function($resource, API_URL) {
var url = API_URL + 'api/me';
return $resource(url);
})
我在控制器中使用它,我设法在视图中显示从工厂返回的数据,如下所示:
.controller('AppCtrl', function($scope, me) {
$scope.data = me.get();
console.log($scope.data);
})
显示此数据的查看代码非常像这样:
<h3>{{data.displayName}}</h3>
当我查看我的控制台时,我发现它正在获取数据,但我也获取了 $promise
和 $resolved
我有一种感觉,它没有按照预期的方式进行当我尝试在不同的控制器中使用同一个工厂时,我确定了:
.controller('newItemCtrl', function($scope, me) {
var data = me.get();
console.log(data.displayName);
})
我没有定义。
我的问题又是第一次使用时如何工作而第二次使用时没有。
它 returns 一个承诺,所以你应该这样使用:
.controller('AppCtrl', function($scope, me) {
$scope.data = me.get(function(data) {
$scope.data = data;
console.log($scope.data);
})
})
$resource.get()
不会立即 return 数据。相反,它 return 是一个空引用,一旦从服务器 return 编辑了数据,它就会随数据一起更新。
与其直接将 get()
的结果分配给您的范围变量,不如使用成功和错误回调:
angular.module('foo').controller('AppCtrl', function($scope, me) {
me.get(function (result) {
$scope.data = result;
console.log($scope.data);
}, function (error) {
// handle error here
});
});
我有一家工厂使用 $resource
进行 HTTP
调用。
工厂代码:
.factory('me', function($resource, API_URL) {
var url = API_URL + 'api/me';
return $resource(url);
})
我在控制器中使用它,我设法在视图中显示从工厂返回的数据,如下所示:
.controller('AppCtrl', function($scope, me) {
$scope.data = me.get();
console.log($scope.data);
})
显示此数据的查看代码非常像这样:
<h3>{{data.displayName}}</h3>
当我查看我的控制台时,我发现它正在获取数据,但我也获取了 $promise
和 $resolved
我有一种感觉,它没有按照预期的方式进行当我尝试在不同的控制器中使用同一个工厂时,我确定了:
.controller('newItemCtrl', function($scope, me) {
var data = me.get();
console.log(data.displayName);
})
我没有定义。 我的问题又是第一次使用时如何工作而第二次使用时没有。
它 returns 一个承诺,所以你应该这样使用:
.controller('AppCtrl', function($scope, me) {
$scope.data = me.get(function(data) {
$scope.data = data;
console.log($scope.data);
})
})
$resource.get()
不会立即 return 数据。相反,它 return 是一个空引用,一旦从服务器 return 编辑了数据,它就会随数据一起更新。
与其直接将 get()
的结果分配给您的范围变量,不如使用成功和错误回调:
angular.module('foo').controller('AppCtrl', function($scope, me) {
me.get(function (result) {
$scope.data = result;
console.log($scope.data);
}, function (error) {
// handle error here
});
});