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

问题描述

我是 Firebase 的新手...我正在尝试在 连接后端" 示例"nofollow">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('项目', 函数($firebase, fbURL) {返回 $firebase(new Firebase(fbURL));});myAppModule.config(function($routeProvider) {$routeProvider.什么时候('/'， {控制器:'ListCtrl',templateUrl:'list.html'}).when('/edit/:projectId', {控制器:'EditCtrl',templateUrl:'detail.html'}).when('/新', {控制器:'CreateCtrl'，templateUrl:'detail.html'}).除此以外({重定向到:'/'});});myAppModule.controller('ListCtrl', function($scope, Projects) {firebaseConn();$scope.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

<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">必需</span>

<div class="form-group" ng-class="{error: myForm.site.$invalid}"><label class="control-label" for="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">必需</span><span class="help-block" ng-show="myForm.site.$error.url">不是网址</span>

<div class="form-group"><label for="description">Description</label><textarea class="form-control" name="description" ng-model="project.description"></textarea>

<a href="#/" class="btn btn-default">取消</a><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="myForm.$invalid">保存</button><button type="button" class="btn btn-danger" ng-click="destroy()" ng-show="project.$remove">删除</button></表单>

解决方案

更改您的网址:

从此:

https://color-consolidator.firebaseio.com

为此:

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

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

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

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.

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.

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

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.

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>

解决方案

Change your urls:

from this:

https://color-consolidator.firebaseio.com

to this:

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

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

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