Javascript Can'；t使用角度编辑记录

我想对任何书籍实现“编辑”功能，但我无法获取我的

书籍

它现在的工作原理：

我单击任意记录（即

）

我被重定向到

图书编辑

状态

此“编辑”页面必须以当前图书的形式包含所有数据（但它没有）

因此，问题是：如何将图书从

books

状态传递到

books\u edit

状态并正确提交

HTML片段：

<tr ng-click="bookCtrl.editBook(book)" ng-repeat="book in bookCtrl.books">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.price }}</td>
      <td>{{ book.pubdate | date }}</td>
      <td>{{ book.coverUrl }}</td>
      <td>{{ book.pagesCount}}</td>
    </tr>

  .state('books_new', {
    url: '/books/new',
    templateUrl: 'books/book_new.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books_edit', {
    url: '/books/edit',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books', {
    url: '/books',
    templateUrl: 'books/books.html',
    controller: 'BookCtrl as bookCtrl'
  })

  editBook: function(book) {
    if (book) {
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

  submitBook: function(book) {
    if (book) {
      console.log(book);
      return books.$save(book).then(function(data) {
        $state.go('books');
      });
    }
  }

<form class="container col-lg-3" ng-submit="bookCtrl.submitBook(book)">
    <div class="input-group">
      <label class="col-sm-2 control-label">Назва:</label>
      <input type="text" ng-model="book.name" class="form-control">

控制器的方法：

<tr ng-click="bookCtrl.editBook(book)" ng-repeat="book in bookCtrl.books">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.price }}</td>
      <td>{{ book.pubdate | date }}</td>
      <td>{{ book.coverUrl }}</td>
      <td>{{ book.pagesCount}}</td>
    </tr>

  .state('books_new', {
    url: '/books/new',
    templateUrl: 'books/book_new.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books_edit', {
    url: '/books/edit',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books', {
    url: '/books',
    templateUrl: 'books/books.html',
    controller: 'BookCtrl as bookCtrl'
  })

  editBook: function(book) {
    if (book) {
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

  submitBook: function(book) {
    if (book) {
      console.log(book);
      return books.$save(book).then(function(data) {
        $state.go('books');
      });
    }
  }

<form class="container col-lg-3" ng-submit="bookCtrl.submitBook(book)">
    <div class="input-group">
      <label class="col-sm-2 control-label">Назва:</label>
      <input type="text" ng-model="book.name" class="form-control">

编辑代码段：

<tr ng-click="bookCtrl.editBook(book)" ng-repeat="book in bookCtrl.books">
      <td>{{ book.name }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.price }}</td>
      <td>{{ book.pubdate | date }}</td>
      <td>{{ book.coverUrl }}</td>
      <td>{{ book.pagesCount}}</td>
    </tr>

  .state('books_new', {
    url: '/books/new',
    templateUrl: 'books/book_new.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books_edit', {
    url: '/books/edit',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })
  .state('books', {
    url: '/books',
    templateUrl: 'books/books.html',
    controller: 'BookCtrl as bookCtrl'
  })

  editBook: function(book) {
    if (book) {
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

  submitBook: function(book) {
    if (book) {
      console.log(book);
      return books.$save(book).then(function(data) {
        $state.go('books');
      });
    }
  }

<form class="container col-lg-3" ng-submit="bookCtrl.submitBook(book)">
    <div class="input-group">
      <label class="col-sm-2 control-label">Назва:</label>
      <input type="text" ng-model="book.name" class="form-control">

Назва:

---

我试图将

book

作为状态参数发送，但没有结果。

处理此问题的最佳方法是“无状态”。这样，用户可以为编辑页面添加书签，并重新加载页面，而无需在应用程序中显示任何状态

将要编辑的书籍的id作为url参数传递到编辑状态，如下所示：

状态配置：

  .state('books_edit', {
    url: '/books/edit/:bookId',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

控制器：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

在编辑控制器中，使用$stateParams服务，使用url中的id获取书籍：

angular.module('myapp').controller('BookCtrl', function($scope, $stateParams){
    //fetch the book id from the url params
    var bookId = $stateParams.bookId;
    //now get the book with the given id
});

---

我建议为编辑功能使用单独的控制器，即不要对每个视图使用“BookCtrl”。

处理此问题的最佳方法是“无状态”。这样，用户可以为编辑页面添加书签，并重新加载页面，而无需在应用程序中显示任何状态

将要编辑的书籍的id作为url参数传递到编辑状态，如下所示：

状态配置：

  .state('books_edit', {
    url: '/books/edit/:bookId',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

控制器：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

在编辑控制器中，使用$stateParams服务，使用url中的id获取书籍：

angular.module('myapp').controller('BookCtrl', function($scope, $stateParams){
    //fetch the book id from the url params
    var bookId = $stateParams.bookId;
    //now get the book with the given id
});

---

我建议为编辑功能使用单独的控制器，即不要对每个视图使用“BookCtrl”。

您可以使用服务来实现这一点。创建一个服务，您可以在其中设置/获取值并将其注入两个控制器。该服务如下所示：

app.service('bookService', function() {
  var books = [];

  var addBook = function(obj) {
      books.push(newObj);
  };

  var getBook = function(){
      return books;
  };

  return {
    addBook: addBook,
    getBook: getBook
  };

});

$state.go('books_edit',{obj: myobj});

以及，在控制器中：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

在book_编辑控制器中：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

您也可以使用$broadcast，请阅读更多：

---

希望它能有所帮助

您可以使用服务来实现这一目标。创建一个服务，您可以在其中设置/获取值并将其注入两个控制器。该服务如下所示：

app.service('bookService', function() {
  var books = [];

  var addBook = function(obj) {
      books.push(newObj);
  };

  var getBook = function(){
      return books;
  };

  return {
    addBook: addBook,
    getBook: getBook
  };

});

$state.go('books_edit',{obj: myobj});

以及，在控制器中：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

在book_编辑控制器中：

$state.go('books_edit', {bookId: book.id});

editBook: function(book) {
    if (book) {
      // ensure to inject productService in controller
      bookService.addBook(book)
      console.log(book);  // logs correct book
      $state.go('books_edit'); // tried to send `book` as a parameter, didn't work
    }
  },

.....
// ensure to inject productService in controller
$scope.book = bookService.getBook(book)
....

您也可以使用$broadcast，请阅读更多：

---

希望它有帮助

尝试在state中传递它。像“books/”这样进行，然后使用state参数检索它

state('books_edit', {
    url: '/books/edit:bookID',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

  submitBook: function(bookID) {
    if (bookID) {
      console.log(bookID);
      return books.$save(bookID).then(function(data) {
        $state.go('books/'+<bookID>);
      });
    }
  }

---

尝试在state.go中传递它，类似“books/”这样，然后使用state参数检索它

state('books_edit', {
    url: '/books/edit:bookID',
    templateUrl: 'books/book_edit.html',
    controller: 'BookCtrl as bookCtrl'
  })

  submitBook: function(bookID) {
    if (bookID) {
      console.log(bookID);
      return books.$save(bookID).then(function(data) {
        $state.go('books/'+<bookID>);
      });
    }
  }

---

定义状态参数如下

$stateProvider.state('books_edit', {url: '/books/:bookId',params: {obj: null},templateUrl: 'books/books_edit.html',controller: 'booksCtrl'})

像这样调用pass参数时：

app.service('bookService', function() {
  var books = [];

  var addBook = function(obj) {
      books.push(newObj);
  };

  var getBook = function(){
      return books;
  };

  return {
    addBook: addBook,
    getBook: getBook
  };

});

$state.go('books_edit',{obj: myobj});

在控制器中，您可以使用

$state.params.obj

---

希望有帮助。

定义状态参数如下

$stateProvider.state('books_edit', {url: '/books/:bookId',params: {obj: null},templateUrl: 'books/books_edit.html',controller: 'booksCtrl'})

像这样调用pass参数时：

app.service('bookService', function() {
  var books = [];

  var addBook = function(obj) {
      books.push(newObj);
  };

  var getBook = function(){
      return books;
  };

  return {
    addBook: addBook,
    getBook: getBook
  };

});

$state.go('books_edit',{obj: myobj});

在控制器中，您可以使用

$state.params.obj

---

希望能有所帮助。

感谢@fikkatra和@Gurpinder在这方面的帮助！完整的解决方案如下：

将其添加到

图书编辑
状态：
params:{data:null}

在

editBook（）

函数中，将参数发送到下一个状态：

$state.go（'books_edit'，{bookId:book.$id，data:book}）

将其添加到

bookCtrl

-

bookCtrl.currentBook=$state.params.data

将视图中的

ng model

更改为

bookCtrl.currentBook.KEY\u NAME

---

感谢@fikkatra和@Gurpinder的帮助！完整的解决方案如下：

将其添加到

图书编辑
状态：
params:{data:null}

在

editBook（）

函数中，将参数发送到下一个状态：

$state.go（'books_edit'，{bookId:book.$id，data:book}）

将其添加到

bookCtrl

-

bookCtrl.currentBook=$state.params.data

将视图中的

ng model

更改为

bookCtrl.currentBook.KEY\u NAME

---

---

您得到的错误/输出是什么？没有错误，只是空输出。顺便说一句，它正确提交数据，但未绑定到单击的记录。请尝试在state.go中传递数据，如“books/”所示，然后使用state参数检索数据。得到的错误/输出是什么？没有错误，只是空输出。顺便说一句，它正确提交数据，但未绑定到单击的记录。请尝试以state.go类似于“books/”的方式传递数据，然后使用state参数检索数据。此解决方案不是无状态的，始终要求您在访问“编辑”页面之前访问“概述”页面。如果您直接导航到我现在正在使用的“编辑”URL，它将不起作用。问题是，我不能在各州之间传递我的书。谢谢你的回答，但我想它解决不了这个问题。这个解决方案不是无状态的，总是要求你在访问“编辑”页面之前访问“概述”页面。如果您直接导航到我现在正在使用的“编辑”URL，它将不起作用。问题是，我不能在各州之间传递我的书。谢谢你的回答，但我想它解决不了问题。看起来是这样的解决方案，我现在就试试。嗯，现在我在url中有了正确的

$id

，将这两个

{book:book，bookId:book.$id}

作为参数发送，但我仍然无法检索它们。你不能传递'book'，因为这是一个复杂的对象。只能传递字符串和数字等简单变量。试着只使用{bookId:book.$id}aw，这就是问题所在。是的，

$stateParams

只有

本书。$id

键。但是我怎样才能得到其他领域呢？我的意思是，我需要

$id

只用于url。但要编辑表单，我需要其他键。一旦您获得id，就用id（可能是从服务或后端）获取书籍。重点是