我是Firebase的新手…我想在Angularjs的主页上获取 “连接后端” 示例以在本地运行。
我克服了常见ngRoute问题, 该应用程序实际上运行正常 , 除了“编辑”对话框外,该对话框不会从Firebase加载数据 。
ngRoute
在list.html部分负荷细并呈现数据,并且detail.html当由所述加载还加载罚款CreateCtrl控制器,它不保存数据到Firebase预期。
list.html
detail.html
CreateCtrl
Firebase
问题出在EditCtrl控制器上,该控制器在字段中呈现 没有* 记录数据的detail.html部分。 *
EditCtrl
让我发疯的是,Angular页面上的示例似乎使用了完全相同的代码,并且一切都在最后完成。我尝试隔离问题,但无济于事。
我已将示例转换为应用程序,并在Github上创建了一个存储库。仓库中充斥着无关的开发资料,但该应用程序应该可以直接在ZIP文件中运行。
非常感谢任何潜在客户,欢呼声!
app.js
var myAppModule = angular.module('project', ['ngRoute', 'firebase']) .value('fbURL', 'https://color-consolidator.firebaseio.com') .factory('Projects', function($firebase, fbURL) { return $firebase(new Firebase(fbURL)); }); myAppModule.config(function($routeProvider) { $routeProvider .when('/', { controller:'ListCtrl', templateUrl:'list.html' }) .when('/edit/:projectId', { controller:'EditCtrl', templateUrl:'detail.html' }) .when('/new', { controller:'CreateCtrl', templateUrl:'detail.html' }) .otherwise({ redirectTo:'/' }); }); myAppModule.controller('ListCtrl', function($scope, Projects) { firebaseConn(); $scope.projects = Projects; }); myAppModule.controller('CreateCtrl', function($scope, $location, $timeout, Projects) { firebaseConn(); $scope.save = function() { Projects.$add($scope.project, function() { $timeout(function() { $location.path('/'); }); }); }; }); myAppModule.controller('EditCtrl', function($scope, $location, $routeParams, $firebase, fbURL) { firebaseConn(); var projectUrl = fbURL + $routeParams.projectId; $scope.project = $firebase(new Firebase(projectUrl)); $scope.destroy = function() { $scope.project.$remove(); $location.path('/'); }; $scope.save = function() { $scope.project.$save(); $location.path('/'); }; });
<form class="form-group" name="myForm"> <div class="form-group" ng-class="{error: myForm.name.$invalid}"> <label class="control-label" for="name">Name</label> <input type="text" class="form-control" name="name" ng-model="project.name" required> <span class="help-block" ng-show="myForm.name.$error.required">Required</span> </div> <div class="form-group" ng-class="{error: myForm.site.$invalid}"> <label class="control-label" for="site">Site URL</label> <input type="url" class="form-control" name="site" ng-model="project.site" required> <span class="help-block" ng-show="myForm.site.$error.required">Required</span> <span class="help-block" ng-show="myForm.site.$error.url">Not a URL</span> </div> <div class="form-group"> <label for="description">Description</label> <textarea class="form-control" name="description" ng-model="project.description"></textarea> </div> <a href="#/" class="btn btn-default">Cancel</a> <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="myForm.$invalid">Save</button> <button type="button" class="btn btn-danger" ng-click="destroy()" ng-show="project.$remove">Delete</button> </form>
更改您的网址:
由此:
https://color-consolidator.firebaseio.com
对此:
https://color-consolidator.firebaseio.com/
我已在实施修复的情况下在您的仓库上创建了一个拉取请求。