Question

以下代码从Firebase获取数据并将其绑定到$ scope：

'use strict';

angular.module('costumeQueenApp')
.controller('ActorByUserIdActorIdCtrl', function ($scope,$routeParams,FireRef) {
    var userId = $routeParams.user_id
    var actorId = $routeParams.actor_id
    var base = FireRef.actorById(userId, actorId) 
    $scope.base = base
    $scope.base.$bind($scope, 'actor')
})

并使用以下模板代码显示数据（注意：使用AngularUI-Bootstrap ）：

<accordion-group heading="Sizes">
    <div ng-repeat="(key, value) in actor.sizes">
           <label for="key">{{key}}</label> <input type="text" ng-model="value" />
    </div>
</accordion-group>

问题是对于ng-repeat div中的项目，三向数据绑定不起作用。如果我有一个输入字段在输入字段中使用完全限定字段，例如actor.sizes.waist，那么一切都按预期工作。

如何使数据绑定正常工作？

Answer 1

如果您替换value，那么您基本上已完成：$childScope.value = somethingNew。与任何其他JavaScript引用一样，此剂量不会修改原始对象的内容。

换句话说，设置上面的value就相当于：

var items = [{label: 'a'}, {label: 'b'}, {label: 'c'}];
angular.forEach(items, function(v, k) {
   v = {foo: bar}; // does nothing to items! Only modifies the local variable `v`
});

使用$set

时使用angularFire可以解决此问题

<accordion-group heading="Sizes">
    <div ng-repeat="(key, value) in sizes">
           <label for="key">{{key}}</label> <input type="text" ng-model="value" ng-change="actor.$child('sizes/'+key).$set(value)" />
    </div>
</accordion-group>

请注意，ng-change在这里感觉有点hackish，但调查那些没有必要来说明解决方案。

此外，如果您使用$bind来同步数据，或者您想控制同步事件的时间，则可以在没有$ set调用的情况下在父对象上设置数据：

<accordion-group heading="Sizes">
    <div ng-repeat="(key, value) in sizes">
           <label for="key">{{key}}</label> <input type="text" ng-model="value" ng-change="actor.sizes[key] = value" />
    </div>
</accordion-group>

如何在AngularFire中为子对象进行三向绑定工作？

1 个答案: