Liaison de données à 3 voies Firebase avec la syntaxe de ControllerAs
Je suis en train d'obtenir une liaison de données à 3 voies avec une base de feu et un feu angulaire. Vous pouvez voir ce que j'ai à 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(); });
Contrôleur :
- Le nouveau flux Firebase pour les utilisateurs suivants
- Comment imprimer l'objet renvoyé par le service Firebase comme tableau (à la console)
- Filtrer les données Firebase à l'aide de AngularJS
- Obtenir la longueur d'un tableau renvoyé par firebase
- Obtenir l'index d'un article dans Firebase AngularFire
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>
Version Plunker: http://plnkr.co/edit/RGA4jZK3Y6n4RkPCHK37
Ce qu'il fait, il obtient les données de la base de travail et l'affiche correctement, mais lorsque je presse le bouton pour appeler la fonction Vote, elle ne se met à jour localement. Je sais pourquoi il ne fonctionne que localement, mais je ne sais pas comment le mettre à jour également dans une base de travail.
J'ai essayé avec $ bindTo, mais d'après ce que je comprends, il faut que la marge de manœuvre fonctionne, et j'essaie d'utiliser le modèle "Controller as vm" sans injecter $ scope.
Quelqu'un peut-il me dire comment mordre ça?
- Comment puis-je trier un réseau de rayons angulaires incendiaires en semaines et en jours?
- Prendre longtemps à charger
- Firebase – Obtenez toutes les données qui contiennent
- AngularJS: enregistre les enregistrements pour la pagination à partir de Firebase
- Firebase Synchronous XMLHttpRequest Déprécié
Tl; dr; – La liaison de données à 3 voies ne fonctionne pas avec la syntaxe de ControllerAs. La méthode bindTo nécessite $scope .
Vous pouvez utiliser AngularFire avec la syntaxe ControllerAs, mais vous ne pouvez pas l'utiliser avec ControllerAs avec $bindTo .
$bindTo a une forte dépendance sur $scope et il se cassera sans lui.
Si vous voulez un exemple d'utilisation de AngularFire avec la syntaxe ControllerAs, consultez cette démo Plunker .
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; });
John Papa parle de l'un des buts de l'utilisation du var vm = this; La syntaxe au lieu de $scope dans chaque contrôleur est de faire de l'utilisation de $scope un choix conscient. Dans ce cas, nous devons inclure la portée de $.
J'ai pris la plunkr de David East dans sa réponse et je l'ai foulé un peu. Ce n'est pas parfait car cela dépend du contrôleur. La valeur étant 'vm'.
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 */ });
Ajout de quelques commentaires de clarification à la réponse ci-dessus en utilisant un système ES6 / JS2015 comme exemple.
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. } }