Firebase angularfire child.$asObject 给出未定义的属性 [英] Firebase angularfire child.$asObject give properties undefined

查看：20
本文介绍了Firebase angularfire child.$asObject 给出未定义的属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个代码:

工厂

app.factory('Items', function($firebase,FIREBASE_URL) {var ref = new Firebase(FIREBASE_URL);var items = $firebase(ref.child('items')).$asArray();变量项目 = {全部:函数(){退换货品;},创建:功能(项目){返回 items.$add(item);},得到:函数(itemId){返回 $firebase(ref.child('items').child(itemId)).$asObject();},更新:函数(itemId，item){返回 $firebase(ref.child('items').child(itemId)).update(item);},删除:功能(项目){返回 items.$remove(item);}};归还物品;});

路线

app.config(function($stateProvider) {$stateProvider.state('items_update', {url: '/items/update/:id',templateUrl: 'views/items/form.html',控制器:'ItemsUpdateController'，解决:{项目:功能(项目，$ stateParams){返回 Items.get($stateParams.id);}}})});

控制器

app.controller('ItemsUpdateController', function ($scope, item, $state) {$scope.item = 项目；console.log($scope.item.url);$scope.add = function() {Items.update($scope.item).then(function () {$state.transitionTo('items');});}});

为什么 console.log($scope.item.url);给我未定义?

但在视图中我已经获得了所有数据

html

<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" 用户反馈/>

<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)*$/" 用户反馈/>

<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 class="form-group"><button type="button" tabindex="4" class="btn btn-default btn-lg" item="item" data-uploader>{{ 'items.form.upload' |翻译}}</button><input type="text" name="url" style="display:none;"required="required" data-ng-model="item.url"/>

<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' |翻译}}</button>

</表单>

结束

如@Frank van Puffelen 的评论我解决了:

app.controller('ItemsUpdateController', function($scope, item, $state) {item.$loaded().then(function(data) {$scope.item = 数据；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 的通知，以了解数据何时加载，然后更新视图.

另见 angularfire - 为什么我不能循环遍历 $asArray 返回的数组吗? 和 尝试从 Firebase 获取子记录.

I've got this code:

factory

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

route

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

controller

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

why console.log($scope.item.url); give me undefined ?

but in the view I've got all the data

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>

ENDS UP

as in the @Frank van Puffelen comment I worked it out with:

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

解决方案

This is because by the time your console.log($scope.item.url); runs, the data hasn't been loaded from Firebase yet. Angular listens for a notification from Firebase/AngularFire to know when the data has loaded and then updates the view.

Also see angularfire - why can't I loop over array returned by $asArray? and Trying to get child records from Firebase.

这篇关于Firebase angularfire child.$asObject 给出未定义的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆