无法在 angular-meteor 应用程序中使用 ui-router 编辑我的文档

Question

我正在使用 ui-router 构建我的第一个 angular-meteor 应用程序。 从 bookList 视图中，您可以访问 bookDetail 模板：

这是图书详情页面：

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

1) ui-router 配置

 //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) 我的 app.js 文件中的“bookEditCtrl”控制器：

     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();
      };


    }]);

这是我尝试进入编辑页面时的结果。

控制台显示错误。如何在输入字段中获取图书详细信息，以便我可以对其进行编辑和保存？我在路由上做错了吗？可能我应该在输入字段中添加一个表达式，如 {{book.title}},{{book.author}},{{book.publisher}} 以便我可以查看图书详细信息？感谢您的支持。

Answer 1

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

应该

controller: 'bookEditCtrl' 

而不是

controller: 'bookEditlCtrl'

更正状态

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