![controllerAs]( "controllerAs")
本文介绍了使用 ControllerAs 语法进行 Firebase 3 向数据绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 firebase 和 angularfire 进行 3 向数据绑定.你可以看到我在 Plunker 中得到了什么:http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
app.js:
angular.module('ideaBattle', ["firebase"]);
服务:
角度.module('ideaBattle').constant('FBURL', 'https://ideabattle.firebaseio.com/').service('Ref', ['FBURL', Firebase]).factory('dataBank', function(Ref, $firebase) {返回 $firebase(Ref).$asArray();});
控制器:
角度.module('ideaBattle').controller('ideaListCtrl', displayIdeas);displayIdeas.$inject = ['dataBank'];功能显示想法(数据库){var vm = 这个；vm.ideas = 数据库；vm.upVote = 功能(想法){vm.ideas[idea.id].votes++;};}
HTML:
<div ng-repeat="vm.ideas 中的想法 | orderBy: '-votes'"><div><h2>{{idea.name}}</h2><p>{{idea.desc|limitTo: 190}}</p><span class="btn" ng-click="vm.upVote(idea)">投票！<span class="徽章">{{idea.votes}}</span></span>
Plunker 版本:http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
它的作用是从 firebase 获取数据并正确显示，但是当我按下按钮调用 upVote 函数时，它只会在本地更新.我知道为什么它只能在本地工作，但我不知道如何让它也在 firebase 中更新.
我已经尝试使用 $bindTo，但据我所知它需要 $scope 才能工作，而且我正在尝试使用Controller as vm"模式而不注入 $scope.
谁能告诉我怎么咬它?
解决方案
tl;dr;— 3 路数据绑定不适用于 ControllerAs 语法.bindTo 方法需要 $scope.
您可以将 AngularFire 与 ControllerAs 语法一起使用，但不能将它与带有 $bindTo 的 ControllerAs 一起使用.
$bindTo 对 $scope 有一个硬依赖，没有它它就会崩溃.
如果您想要使用 AngularFire 和 ControllerAs 语法的示例，请查看这个 Plunker 演示.
angular.module('app', ['firebase'])//我们正在使用的 Firebase 的常量.constant('FBURL', 'https://.firebaseio.com/todos')//将 Firebase 引用作为服务返回.service('Ref', ['FBURL', Firebase])//通过返回 Firebase 的 Todos//来自工厂的数组.factory('Todos', function(Ref, $firebase) {返回 $firebase(Ref).$asArray();})//注入 Todos 并将它们分配给this"；//对于 ControllerAs 语法.controller('MainCtrl', function(Todos) {this.todos = 待办事项；});
I'm tring to get 3-way data binding with firebase and angularfire. You can see what I've got in Plunker: http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
app.js:
angular.module('ideaBattle', ["firebase"]);
services:
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>
Plunker version: http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
What it does, it gets the data from firebase and displays it correctly, but when I push the button to call upVote function it only updates locally. I know why it only works locally, but I don't know how to make it also update in firebase.
I've tried with $bindTo, but from what I understand it requires $scope to work, and I'm trying to use "Controller as vm" pattern without injecting $scope.
Can anybody tell me how to bite that?
解决方案
tl;dr; — 3-way data-binding does not work with ControllerAs syntax. The bindTo method requires $scope.
You can use AngularFire with ControllerAs syntax, but you can't use it with ControllerAs with $bindTo.
$bindTo has a hard dependency on $scope and it will break without it.
If you want an example of using AngularFire with ControllerAs syntax, check out 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;
});
这篇关于使用 ControllerAs 语法进行 Firebase 3 向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！