javascript - 使用ControllerAs语法的Firebase 3向数据绑定(bind)

我正在尝试与Firebase和angularfire进行三向数据绑定(bind)。您可以看到我在Plunker中拥有的功能:http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37

app.js :

angular.module('ideaBattle', ["firebase"]);

服务:

angular
    .module('ideaBattle')
    .constant('FBURL', 'https://ideabattle.firebaseio.com/')
    .service('Ref', ['FBURL', Firebase])
    .factory('dataBank', function(Ref, $firebase) {
        return $firebase(Ref).$asArray();
    });

Controller :

angular
    .module('ideaBattle')
    .controller('ideaListCtrl', displayIdeas);

displayIdeas.$inject = ['dataBank'];
function displayIdeas(dataBank){
    var vm = this;
    vm.ideas = dataBank;

    vm.upVote = function(idea){
        vm.ideas[idea.id].votes++;
    };
}

HTML :

<div ng-controller="ideaListCtrl as vm">
    <div ng-repeat="idea in vm.ideas | orderBy: '-votes'">
        <div>
            <h2>{{idea.name}}</h2>
            <p>{{idea.desc|limitTo: 190}}</p>
            <span class="btn" ng-click="vm.upVote(idea)">Vote! <span class="badge"> {{idea.votes}}</span></span>
        </div>
    </div>
</div>

柱塞版本:http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37

它所做的是，它从firebase中获取数据并正确显示，但是当我按下按钮调用upVote函数时，它仅在本地更新。我知道为什么它只能在本地运行，但是我不知道如何在Firebase中更新它。

我已经尝试过$ bindTo，但据我所知，它需要$ scope才能工作，并且我试图使用“Controller as vm”模式而不注入(inject)$ scope。

有人可以告诉我怎么咬吗？

最佳答案

tl; dr; — 3向数据绑定(bind)不适用于ControllerAs语法。 bindTo方法需要$scope。
您可以将AngularFire与ControllerAs语法一起使用，但不能将其与带有$bindTo的ControllerAs一起使用。$bindTo对$scope有着严格的依赖关系，如果没有它，它将崩溃。
如果您需要使用AngularFire和ControllerAs语法的示例，请查看 this Plunker demo 。

  angular.module('app', ['firebase'])

  // constant for the Firebase we're using
  .constant('FBURL', 'https://<your-firebase>.firebaseio.com/todos')

  // return the Firebase ref as a service
  .service('Ref', ['FBURL', Firebase])

  // return the Todos from Firebase by returning the
  // array from the factory
  .factory('Todos', function(Ref, $firebase) {
    return $firebase(Ref).$asArray();
  })

  // inject the Todos and assign them to "this"
  // for the ControllerAs syntax
  .controller('MainCtrl', function(Todos) {
    this.todos = Todos;
  });