私は、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}} のような式を追加して、本の詳細を表示する必要がありますか? ご支援いただきありがとうございます。