Can't Edit Record Using Angular

I want to implement 'edit' feature to any book, but I can't get my book. How it works now: I click on the any record (which is ). I am being redirected to the books_edi

Solution 1:

The best way to handle this, is to be 'stateless'. This way a user can bookmark the edit page, and reload the page without requiring any state to be present in the app.

Pass the id of the book you want to edit as a url parameter to the edit state, like so:

state config:

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

controller:

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

In the edit controller, fetch the book using the id from the url, using the $stateParams service:

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

I would advise to use a separate controller for the edit functionality, i.e. do not use 'BookCtrl' for every view.

Solution 2:

Define state parameters as following

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

when calling pass parameter like this:

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

In controller you can receive parameter using

$state.params.obj

Hope it helps.

Solution 3:

You can use a service to reach this. Create a service where you can set/get the value and inject in both controllers. The service looks like this:

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

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

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

  return {
    addBook: addBook,
    getBook: getBook
  };

});

And, in controller:

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
    }
  },

In book_edit controller:

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

You can also use $broadcast, read more: On and broadcast in angular

Hope it helps

Solution 4:

Try passing it in state.go as something like this "books/" and then use state params to retrieve it.

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

in the Controller

editBook: function($scope, $stateParams) {
     $scope.bookID = $stateParams.bookID;
  }

Solution 5:

Thanks @fikkatra and @Gurpinder for helping with this! The complete solution is following:

1. Add this to the books_edit state: params: {data: null}

2. In the editBook() function send parameters to the next state:

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

3. Add this to the bookCtrl - bookCtrl.currentBook = $state.params.data;

4. Change ng-model in the view to bookCtrl.currentBook.KEY_NAME