AngularJs'接線後端'選項編輯不加載

我是新來的Angular，我試圖讓'Wire Up a Backend'的例子工作，但添加或編輯項目的選項不' t出現。搜索欄，項目名稱和說明顯示，但不顯示右側的圖標。AngularJs'接線後端'選項編輯不加載

我在其他問題中看到沒有'ngRoute'或不在Firebae URL末尾刪除斜槓可能會導致問題，但我認爲我已經解決了這兩個問題。我使用的代碼如下所示;誰能告訴我我要去哪裏？

編輯;這裏是一個Plunker

編輯2：我添加Bootstrap和字體真棒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('/'); 
      }; 
     });

來源

2014-02-07 thekingsrook

的jsfiddle請 –

喜我加了一個Plnker。 – thekingsrook

我能勸移此規則下

第一件事：

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

，甚至不喜歡這樣的開始

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

來源

2014-02-08 11:48:43

謝謝，但問題仍然存在。我將Bootstrap和Font Awesome CDN鏈接添加到index.html，現在圖標顯示出來了，但編輯頁面仍然被打破。 – thekingsrook

不幸的是我不能在plnkr上玩網址。可能是另一個沙箱？ –

啊我沒有公開，這是一個新的公開的; http://plnkr.co/edit/Emw0zu?p=info – thekingsrook

AngularJs'接線後端'選項編輯不加載

回答

相關問題