2015-08-11 1 views
2

Я создаю свое первое приложение с угловым метеоритом, используя ui-router. Из Booklist просмотра вы можете получить доступ к шаблону bookDetail:не может редактировать мой документ с помощью ui-router в приложении углового метеор

enter image description here

вот страница книги деталь:

enter image description here

На странице подробно я хотел бы получить доступ к «изменить страницу» , Эта страница должна возвращать те же данные на странице подробностей документа, чтобы пользователь мог ее редактировать и сохранять. Но я терплю неудачу. Пожалуйста, проверьте мой код ниже:

1) Пользовательский интерфейс-маршрутизатор конфигурации

//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' контроллер из моего файла app.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}}, чтобы я мог видеть детали книги? Спасибо за Вашу поддержку.

ответ

2

Его опечатка в имени контроллера внутри bookEdit состояние.

он должен

controller: 'bookEditCtrl' 

вместо

controller: 'bookEditlCtrl' 

исправленном состоянии

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

Спасибо большое. Теперь это работает! я просмотрел свой код 10 раз, но я не смог обнаружить опечатку. Еще раз спасибо –

+0

@SandroPalmieri no probs..может ли вы принять ответ? –