【发布时间】：2014-12-23 15:06:55
【问题描述】：
我有这个代码：
工厂
app.factory('Items', function($firebase,FIREBASE_URL) {
var ref = new Firebase(FIREBASE_URL);
var items = $firebase(ref.child('items')).$asArray();
var Item = {
all: function () {
return items;
},
create: function (item) {
return items.$add(item);
},
get: function (itemId) {
return $firebase(ref.child('items').child(itemId)).$asObject();
},
update: function (itemId, item) {
return $firebase(ref.child('items').child(itemId)).update(item);
},
delete: function (item) {
return items.$remove(item);
}
};
return Item;
});
路线
app.config(function($stateProvider) {
$stateProvider
.state('items_update', {
url: '/items/update/:id',
templateUrl: 'views/items/form.html',
controller:'ItemsUpdateController',
resolve:{
item:function(Items,$stateParams){
return Items.get($stateParams.id);
}
}
})
});
控制器
app.controller('ItemsUpdateController', function ($scope, item, $state) {
$scope.item = item;
console.log($scope.item.url);
$scope.add = function() {
Items.update($scope.item).then(function () {
$state.transitionTo('items');
});
}
});
为什么是 console.log($scope.item.url);给我未定义的？
但在视图中我已经获得了所有数据
html
<form class="form-horizontal" role="form" name="form" data-ng-submit="add()">
<div class="form-group">
<input type="text" name="title" tabindex="1" class="form-control" placeholder="{{ 'items.form.title' | translate }}" data-ng-model="item.title" required="required" data-ng-minlength="3" data-ng-maxlength="25" user-feedback />
</div>
<div class="form-group">
<input type="text" name="ingredients" tabindex="2" class="form-control" placeholder="{{ 'items.form.ingredients' | translate }}" data-ng-model="item.ingredients" required="required" ng-pattern="/^\w(\s*,?\s*\w)*$/" user-feedback />
</div>
<div class="form-group">
<input type="text" name="price" tabindex="3" class="form-control" placeholder="{{ 'items.form.price' | translate }}" data-ng-model="item.price" required="required" data-smart-float user-feedback />
</div>
<div class="form-group">
<button type="button" tabindex="4" class="btn btn-default btn-lg" item="item" data-uploader>{{ 'items.form.upload' | translate }}</button>
<input type="text" name="url" style="display:none;" required="required" data-ng-model="item.url" />
</div>
<div class="form-group form-no-required clearfix">
<div class="pull-right">
<button type="submit" tabindex="5" class="btn btn-primary" data-ng-disabled="form.$invalid">{{ 'items.form.submit' | translate }}</button>
</div>
</div>
</form>
结束
就像@Frank van Puffelen 的评论一样 我解决了这个问题：
app.controller('ItemsUpdateController', function($scope, item, $state) {
item.$loaded().then(function(data) {
$scope.item = data;
console.log($scope.item.url);
});
$scope.add = function() {
Items.update($scope.item).then(function() {
$state.transitionTo('items');
});
}
});
【问题讨论】：
-
这是因为当您的
console.log($scope.item.url);运行时，尚未从 Firebase 加载数据。 Angular 监听来自 Firebase/AngularFire 的通知，以了解数据何时加载，然后更新视图。另见stackoverflow.com/questions/26395912/… 和stackoverflow.com/questions/26268446/…。 -
+1 非常感谢 :) 通常承诺是通过 ui-router 中的 resolve 完成的，所以 angularfire 不像 restangular 那样使用承诺？
-
AngularFire 绝对使用承诺。它们只是解决似乎比您习惯的要晚，可能是因为数据必须从 Firebase 服务器下来。如果您想等待 AngularFire 的承诺，请执行
$scope.item.$loaded().then(function(item) { console.log(item.url); })。一般来说：不要浪费时间尝试使异步代码同步，使用它的异步特性并将你的功能放在承诺/内部回调之后。 -
@Frank van Puffelen mmm 看看代码，当用户可以点击更新未加载的项目时，是否认为将 add 函数放在 $loaded 块中是个好主意？跨度>
标签： angularjs firebase angularfire