无法在 angular-meteor 应用程序中使用 ui-router 编辑我的文档
cannot edit my document using ui-router within an angular-meteor app
我正在使用 ui-router 开发我的第一个 angular-meteor 应用程序。
从 bookList 视图中,您可以访问 bookDetail 模板:
这是图书详情页面:
我想从详细信息页面访问 'edit page'。此页面应 return 与文档详细信息页面相同的数据,以便用户能够对其进行编辑和保存。但我失败了。请检查下面我的代码:
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) 我的 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}} 这样我就可以看到书的详细信息?感谢您的支持。
它在 bookEdit
状态中的控制器名称中的拼写错误。
应该
controller: 'bookEditCtrl'
而不是
controller: 'bookEditlCtrl'
更正状态
.state('bookEdit', {
url: '/edit/books/:bookId',
templateUrl: 'bookEdit.ng.html',
controller: 'bookEditCtrl' //<--change here
});
我正在使用 ui-router 开发我的第一个 angular-meteor 应用程序。 从 bookList 视图中,您可以访问 bookDetail 模板:
这是图书详情页面:
我想从详细信息页面访问 'edit page'。此页面应 return 与文档详细信息页面相同的数据,以便用户能够对其进行编辑和保存。但我失败了。请检查下面我的代码:
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) 我的 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}} 这样我就可以看到书的详细信息?感谢您的支持。
它在 bookEdit
状态中的控制器名称中的拼写错误。
应该
controller: 'bookEditCtrl'
而不是
controller: 'bookEditlCtrl'
更正状态
.state('bookEdit', {
url: '/edit/books/:bookId',
templateUrl: 'bookEdit.ng.html',
controller: 'bookEditCtrl' //<--change here
});