AngularJS“连接后端”示例未在编辑对话框上加载数据

Question

我是Firebase的新手…我想在Angularjs的主页上获取 “连接后端”
示例以在本地运行。

我克服了常见ngRoute问题， 该应用程序实际上运行正常 ， 除了“编辑”对话框外，该对话框不会从Firebase加载数据 。

在list.html部分负荷细并呈现数据，并且detail.html当由所述加载还加载罚款CreateCtrl控制器，它不保存数据到Firebase预期。

问题出在EditCtrl控制器上，该控制器在字段中呈现 没有* 记录数据的detail.html部分。 *

让我发疯的是，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('/');
    };
});

detail.html

<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>

Answer 1

更改您的网址：

由此：

https://color-consolidator.firebaseio.com

对此：

https://color-consolidator.firebaseio.com/

我已在实施修复的情况下在您的仓库上创建了一个拉取请求。