AngularJS“连接后端"示例未在编辑对话框上加载数据 [英] AngularJS “Wire up a Backend” example not loading data on edit dialog

问题描述

我是Firebase的新手...我想在 Angularjs 的主页以在本地运行.

I'm new to Firebase... I'm trying to get the "Wire up a Backend" example at Angularjs' home page to run locally.

我克服了常见的ngRoute问题，并且该应用实际上运行正常，除了编辑对话框(它不会从Firebase加载数据)以外，.

I got past the common ngRoute problem and the app is actually working fine, except for the edit dialog, that doesn't load data from the Firebase.

list.html部分可以很好地加载并呈现数据，而detail.html在被CreateCtrl控制器加载时也可以加载，该控制器确实将数据保存到了Firebase中.

The list.html partial loads fine and renders the data, and the detail.html also loads fine when loaded by the CreateCtrl controller, which does save data to the Firebase as expected.

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

The problem is with the EditCtrl controller, which renders the detail.html partial without the record's data in the fields.

让我发疯的是，Angular页面上的示例似乎使用了完全相同的代码，并且一切都在最后完成.我尝试隔离问题，但无济于事.

What makes me nuts is that the example at Angular's page seems to use the exact same code, and everything works at their end. I've tried isolating the problem, with no avail.

我已将示例转换为应用程序，并创建了位于Github的存储库.存储库中充斥着无关的开发资料，但是该应用程序应该可以直接在 ZIP 文件.

I've converted the example into an app and created a repository at Github. The repo is bloated with unrelated development stuff, but the app is supposed to work straight out of the ZIP file.

真的很感谢任何潜在客户，欢呼！

Really appreciate any leads, cheers!

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>

推荐答案

更改您的网址:

从这里:

https://color-consolidator.firebaseio.com

对此:

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

我已在您的存储库上创建了一个拉出请求，并已实施修复.

I've created a pull request on your repo with the fix implemented.

这篇关于AngularJS“连接后端"示例未在编辑对话框上加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！