AngularJs không cập nhật mô hình khi dữ liệu đầu vào được thay đổi

Question

Tôi có ứng dụng góc sử dụng chỉ thị. Trong chỉ thị tôi có mẫu định nghĩa pop up phương thức.

Về cơ bản, ứng dụng rất đơn giản hiển thị danh sách tác giả sách và trong danh sách có nút Chỉnh sửa mở hộp phương thức. Nếu tôi mở phương thức để chỉnh sửa tác giả sách và chỉ đóng phương thức mà không cần chỉnh sửa tác giả - không có vấn đề gì.

Nhưng nếu tôi mở phương thức và nhập nội dung nào đó vào tác giả và đóng, mô hình sẽ bị mắc kẹt với giá trị nhập hiện tại trong toàn bộ thời gian, vì vậy nếu tôi mở một tác giả khác để chỉnh sửa, mô hình sẽ không đã được cập nhật.

Câu hỏi của tôi là: tại sao điều này xảy ra và cách khắc phục?

HTML

<div ng-controller="MyCtrl"> 
    <table class="table table-hover"> 
      <tr>    
       <td><b>Publisher</b></td>     
       <td><b>Edit Publisher</b></td> 
      </tr> 
      <tr ng-repeat="book in books"> 
       <td> 
        {{book.Author}} 
       </td> 
       <td> 
        <span ng-click="toggleModal(book)" class="btn btn-primary">Edit</span> 
       </td> 
      </tr> 
     </table> 

    <modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'> 
     <div ng-show="divBook"> 
       <input type="text" name="bookAuthor" ng-model="bookAuthor" /> 
     </div> 
    </modal-dialog> 
</div> 

góc

var myApp = angular.module('myApp',[]); 

myApp.controller("MyCtrl", function($scope){ 
    $scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}]; 

    $scope.modalShown = false; 
    $scope.toggleModal = function (book) { 
      $scope.bookAuthor = book.Author; 
      $scope.modalShown = !$scope.modalShown; 
      $scope.divBook = true; 
    };  
}); 

myApp.directive('modalDialog', function() { 
    return { 
     restrict: 'E', 
     template: "<div class='ng-modal' ng-show='show'>" 
        +"<div class='ng-modal-overlay' ng-click='hideModal()'>" 
        +"</div>" 
         +"<div class='ng-modal-dialog' ng-style='dialogStyle'>" 
         +"<div class='ng-modal-close' ng-click='hideModal()'>X</div>" 
         +"<div class='ng-modal-dialog-content' ng-transclude>" 
        +"</div>" 
        +"</div>" 
       +"div>", 
     replace: true, 
     scope: { 
      show: '=info' 
     }, 
     transclude: true, 
     link: function (scope, element, attrs) { 

      //scope.apply(); 
      scope.dialogStyle = {}; 
      if (attrs.width) 
       scope.dialogStyle.width = attrs.width; 
      if (attrs.height) 
       scope.dialogStyle.height = attrs.height; 
      scope.hideModal = function() { 
       scope.show = false; 
      }; 
     } 
    }; 
}); 

Vì vậy, các trường hợp thử nghiệm sẽ là:

Chọn Edit -> thay đổi giá trị -> đóng modal

Chọn Edit trên một tác giả khác.

JSFiddle:http://jsfiddle.net/HB7LU/17694/

Answer 1

Giá trị mô hình đang thay đổi, tuy nhiên bạn đang tạo ra một biến mới và không thay đổi các yếu tố gốc của mảng.

Bạn có thể thay đổi điều đó bằng cách đặt một con trỏ của đối tượng mảng trong một phạm vi biến

$scope.toggleModal = function (book) { 
     $scope.book = book; 
     $scope.modalShown = !$scope.modalShown; 
     $scope.divBook = true; 
}; 

sau đó chỉ những ng-mô hình đến tài sản của đối tượng .Author.

<input type="text" name="bookAuthor" ng-model="book.Author" /> 

Xem sửa đổi JSFiddle: http://jsfiddle.net/9a2jcc9u/1/

Answer 2

Tôi đã thay đổi fiddle JS của bạn, nếu bạn muốn thay đổi tên và nó tự động thay đổi ở lưới hơn loại bỏ angular.copy (book) và trực tiếp chuyển nhượng cuốn sách. bạn có thể thấy jsfiddle của bạn ở đây jsfiddle

myApp.controller("MyCtrl", function($scope){ 
    $scope.books = [{Author:"Jon Skeet"},{Author:"John Papa"},{Author:"Scott Hanselman"}]; 

    $scope.modalShown = false; 
    $scope.toggleModal = function (book) { 
      $scope.book = angular.copy(book); 
      $scope.modalShown = !$scope.modalShown; 
      $scope.divBook = true; 
    };  
}); 

modal thoại

<modal-dialog info='modalShown' show='modalShown' width='600px' height='60%'> 
    <div ng-show="divBook"> 
      <input type="text" name="bookAuthor" ng-model="book.Author" /> 
    </div> 
</modal-dialog> 

Answer 3

thử một cái gì đó của bạn như thế này

myApp.controller('MyCtrl', ['$scope',function($scope) { 

//your code 

}]);