Question

我是Angular的新手，我正试图让'Wire Up a Backend'示例工作，但是添加或编辑项目的选项并没有显示出来。显示搜索栏，项目名称和说明，但不显示右侧的图标。

我在其他问题中看到没有'ngRoute'或者没有删除Firebae URL末尾的斜杠会导致问题，但我认为我已经考虑到了这两个问题。我正在使用的代码如下;谁能告诉我哪里出错？

EDIT;这是一个Plunker

编辑2：我添加了Bootstrap和Font Awesome CDN链接到index.html，现在图标显示，但编辑页面仍然无法正常工作。

的index.html

<!doctype html>
<html ng-app="project">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-resource.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
    <script src="project.js"></script>
</head>


<body>
    <h2>JavaScript Projects</h2>
    <div ng-view></div>
</body>

</html>

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

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

project.js

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

        .value('fbURL', 'https://angularjs-projects.firebaseio.com')

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

        .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:'/'
            });
        })

        .controller('ListCtrl', function($scope, 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, $firebase, fbURL) {
            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('/');
            };
        });

Answer 1

我可以建议的第一件事将此规则转移到底部：

 .when('/', {
              controller:'ListCtrl',
              templateUrl:'list.html'
            })

或者甚至喜欢这样开头

.otherwise( {
                  controller:'ListCtrl',
                  templateUrl:'list.html'
                });

AngularJs'连接后端'选项编辑不加载

1 个答案: