AngularJS“连接后端”应用程序未在编辑对话框中加载数据-使用最新的firebase答案

【问题标题】：AngularJS “Wire up a Backend” the app is not loading data on edit dialog - with latest firebaseAngularJS“连接后端”应用程序未在编辑对话框中加载数据-使用最新的firebase
【发布时间】：2015-12-04 12:16:47
【问题描述】：

here 提出了另一个相同的问题，但即使按照其中的说明进行操作，该解决方案也没有真正解决我的问题。但是，仅当我将“OrderByPriority”放在“ng-repeat”部分时，它才适用于旧版本的 firebase。

请帮忙，因为我是 angular 和 firebase 的新手。

项目.js

angular.module('project', ['ngRoute', 'firebase'])

    .value('fbURL', 'https://mock-ng.firebaseio.com/')

    .factory('Projects', function($firebaseArray, fbURL) {
      return $firebaseArray(new Firebase(fbURL));
    })

    .config(function($routeProvider) {
      $routeProvider
        .when('/edit/:projectId', {
          controller:'EditCtrl',
          templateUrl:'detail.html'
        })
        .when('/new', {
          controller:'CreateCtrl',
          templateUrl:'detail.html'
        })
        .when('/', {
          controller:'ListCtrl',
          templateUrl:'list.html'
        })
        .otherwise({
          controller:'ListCtrl',
          templateUrl:'list.html'
        });
    })

    .controller('ListCtrl', function($scope, $firebaseArray, Projects) {
      $scope.projects = Projects;
    })

    .controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
      $scope.save = function() {
        Projects.$add($scope.project, function() {
          $timeout(function() { $location.path('/'); });
        });
      };
    })

    .controller('EditCtrl',
      function($scope, $location, $routeParams, $firebaseArray, fbURL, Projects) {
        var projectUrl = fbURL + $routeParams.projectId;
        $scope.project = $firebaseArray(new Firebase(projectUrl));

        $scope.destroy = function() {
          $scope.project.$remove();
          $location.path('/');
        };

        $scope.save = function() {
          $scope.project.$save();
          $location.path('/');
        };
    });

list.html

 <input type="text" ng-model="search" class="search-query"                 
        placeholder="Search">

    <table>
      <thead>
      <tr>
        <th>Project</th>
        <th>Description</th>
        <th><a href="#/new"><i class="icon-plus-sign"></i></a></th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="project in projects | filter:search | orderBy:'name'">
        <td><a href="{{project.site}}" target="_blank">{{project.name}}</a>                
    </td>
        <td>{{project.description}}</td>
        <td>
          <a href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
        </td>
      </tr>
      </tbody>
    </table>

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>

index.html

<!doctype html>
<html ng-app="project">
<head>
<script src="libs/jquery-1.11.3.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>
<script src="libs/angularjs/angular/angular.js"></script>
<script src="libs/firebase/firebase.js"></script>
<script src="libs/firebase/angularfire.min.js"></script>
<script src="libs/angularjs/angular-route.js"></script>
<script src="libs/datepicker/moment.js"></script>
<script src="libs/datepicker/daterangepicker.js"></script>
<script src="libs/autocomplete/select-tpls.min.js"></script>
<script src="libs/angularjs/dirPagination.js"></script>
<script src="libs/bootstrap/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<script src="project.js"></script>
</head>
<body>
<h2>JavaScript Projects</h2>
<div ng-view></div>
</body>
</html>

提前致谢！

【问题讨论】：

标签： javascript angularjs firebase angularfire angular-routing

【解决方案1】：

此问题在您的EditCtrl 中。当您想要同步 $firebaseObject() 时，您正在使用 $firebaseArray()。

Plnkr Demo

.value('fbURL', 'https://mock-ng.firebaseio.com/')

// constructor injection for a Firebase database reference
.service('rootRef', ['fbURL', Firebase])

.controller('EditCtrl',
  function($scope, $location, $routeParams, $firebaseObject, rootRef) {
    // create the project item level reference
    var projectRef = rootRef.child($routeParams.projectId)
    // synchronize the project as an object, not an array
    $scope.project = $firebaseObject(projectRef);

    $scope.destroy = function() {
      $scope.project.$remove();
      $location.path('/');
    };

    $scope.save = function() {
      $scope.project.$save();
      $location.path('/');
    };
});

【讨论】：