我想通过firebase和angularfire获得3路数据绑定。你可以看到我在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();
});
控制器:
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版本:http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
它做什么,它从firebase获取数据并正确显示它,但是当我按下按钮来调用upVote函数时,它只在本地更新。我知道它为什么只在本地工作,但我不知道如何让它也在firebase中更新。
我已尝试使用$ bindTo,但据我所知,它需要$ scope才能工作,而且我尝试使用&#34; Controller作为vm&#34;模式没有注入$ scope。
有人能告诉我怎么咬这个吗?
答案 0 :(得分:10)
bindTo
方法需要$scope
。您可以将AngularFire与ControllerAs语法一起使用,但不能将ControllerAs与$bindTo
一起使用。
$bindTo
对$scope
有很强的依赖性,如果没有它,它就会崩溃。
如果您想要使用带有ControllerAs语法的AngularFire的示例,请查看 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;
});
答案 1 :(得分:5)
John Papa talks关于在每个控制器中使用var vm = this;
语法而不是$scope
的目的之一是使$scope
成为有意识的选择。在这种情况下,我们需要包括$ scope。
我在his answer带走了David East的傻瓜,并稍微摆弄了它。它不是完美的,因为它取决于控制器的价值是&#39; vm&#39;。
http://plnkr.co/edit/vLLaa7QJvfryYRD7cZvO?p=preview
.controller('MainCtrl', function(Todos, $scope) { /* Add $scope */
var vm = this;
vm.todos = Todos.all();
vm.lonelyTodo = Todos.get('-JeNOtYPv7AZmVAoZ1bu');
vm.lonelyTodo.$bindTo($scope, 'vm.lonelyTodo'); /* Add three way binding */
});
答案 2 :(得分:1)
使用ES6 / JS2015 systax作为示例,在上面的响应中添加一些说明评论。
export class SomeController {
constructor($firebaseObject, $scope) {
'ngInject';
//using the firebase SDK 3.0
let obj = $firebaseObject(firebase.database().ref().child('someKey'));
// To make the data available in the DOM, assign it to
// 'this.data' accessible from DOM as $ctrl.data
this.data = obj;
// For three-way data bindings, you will still need to inject '$scope'
// but you can alias your controller on $scope
obj.$bindTo($scope, '$ctrl.data');
// Why does this work?
// This works because angular 1x puts controllerAs
// on top of $scope. So '$scope.$ctrl.data' is the same as 'this.data'.
// Note: $ctrl is the default controllerAs syntax if not specified,
// just change $ctrl to your defined controllerAs ailias if
// specified.
}
}