代码之家  ›  专栏  ›  技术社区  ›  Sandro Palmieri

无法在angular流星应用程序中使用ui路由器编辑我的文档

  •  2
  • Sandro Palmieri  · 技术社区  · 9 年前

    我正在使用ui路由器构建我的第一个角流星应用程序。 从bookList视图中,您可以访问bookDetail模板:

    enter image description here

    这是书籍详情页:

    enter image description here

    我想从详细信息页面访问“编辑页面”。此页面应返回与文档详细信息页面相同的数据,以便用户能够编辑和保存它。但我失败了。请检查下面的代码:

    1) ui路由器配置

     //Router
     angular.module('bookshelf',['angular-meteor', 'ui.router']);
     //Router configuration
    
             angular.module('bookshelf').config(['$urlRouterProvider',
            '$stateProvider','$locationProvider',
         function($urlRouterProvider, $stateProvider, $locationProvider){
    
    $locationProvider.html5Mode(true);
    
    $stateProvider
      .state('books', {
        url: '/books',
        templateUrl: 'bookList.ng.html',
        controller: 'BookListCtrl'
      })
      .state('bookAdd', {
        url: '/books/add',
        templateUrl: 'addBook.ng.html',
        controller: 'bookAddCtrl'
    
      })
      .state('bookDetail', {
        url: '/books/:bookId',
        templateUrl: 'bookDetail.ng.html',
        controller: 'bookDetailCtrl'
      })
      .state('bookEdit', {
        url: '/edit/books/:bookId',
        templateUrl: 'bookEdit.ng.html',
        controller: 'bookEditlCtrl'
      });
    
      $urlRouterProvider.otherwise('/books');
      }]);
    

    2) html模板“bookEdit.ng.html”:

    <div class="container">
    <form  ng-controller="bookEditCtrl">
    <label>Title</label>
    <input ng-model="book.title">
    <label>Author</label>
    <input ng-model="book.author">
    <label>Publisher</label>
    <input ng-model="book.publisher">
    <button type="button" class="btn btn-success" 
     ng-click="save(book)">Save</button>
    
    </form>
    </div>
    

    3) 我的应用程序中的“bookEditCtrl”控制器。js文件:

         angular.module('bookshelf').controller('bookEditCtrl', 
         ['$scope','$stateParams','$meteor',
         function($scope,$stateParams,$meteor){
    
          $scope.book = $meteor.object(books, $stateParams.bookId);
          $scope.save = function(){
            $scope.book.save();
          };
    
    
        }]);
    

    这是我尝试转到编辑页面时的结果。 enter image description here

    控制台显示错误。如何在输入字段中获取书本详细信息,以便编辑和保存它们?我的路线有问题吗?也许我应该在输入字段中添加一个表达式,例如{{book.title}}、{{book.author}、}{book.publisher},这样我就可以看到书的详细信息了?感谢您的支持。

    1 回复  |  直到 9 年前
        1
  •  2
  •   Pankaj Parkar    9 年前

    内部控制器名称中的拼写错误 bookEdit 状态

    它应该

    controller: 'bookEditCtrl' 
    

    而不是

    controller: 'bookEditlCtrl'
    

    已更正状态

    .state('bookEdit', {
        url: '/edit/books/:bookId',
        templateUrl: 'bookEdit.ng.html',
        controller: 'bookEditCtrl' //<--change here
    });