AngularJs aktualisiert das Modell nicht, wenn die Eingabedaten geändert werden

Question

Ich habe eckige Anwendung, die Anweisungen verwendet. In der Richtlinie habe ich eine Vorlage, die Pop-up-modal definiert.

Im Grunde ist es sehr einfache Anwendung, die eine Liste von Buchautoren zeigt, und in der Liste gibt es eine bearbeiten Schaltfläche, die modale Box öffnet. Wenn ich das Modal zum Bearbeiten des Buchautors öffnen und es einfach schließen, ohne den Autor zu bearbeiten - gibt es kein Problem.

Wenn ich jedoch das modale öffne und etwas in die Autoreingabe eintippe und es schließe, bleibt das Modell mit dem aktuellen Eingabewert für die ganze Zeit hängen. Wenn ich also einen anderen Autor zum Bearbeiten öffne, wird das Modell nicht bleibe auf dem Laufenden.

Meine Frage ist: Warum passiert das und wie kann ich das beheben?

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> 

Angular

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

So wird der Testfall sein:

Klicken Sie auf Bearbeiten -> den Wert ändern -> schließen Sie das modale

Klicken Sie auf Bearbeiten auf einen anderen Autor.

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

Answer 1

der Modellwert sich ändert, jedoch haben Sie eine neue Variable zu schaffen und nicht das ursprüngliche Element des Feldes modifiziert wird.

Sie können das ändern, indem Sie einen Zeiger des Array-Objekts in einem Umfang variable

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

dann zeigt das ng-Modell auf die .Author Eigenschaft des Objekts setzen.

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

Siehe modifizierte JSFiddle: http://jsfiddle.net/9a2jcc9u/1/

Answer 2

Ich habe Ihre JS Geige geändert, wenn Sie Namen ändern möchten, und es ändert sich automatisch in Gitter Buch angular.copy (Buch) und direkt zuweisen als entfernen. Sie können Ihre jsfiddle hier 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; 
    };  
}); 

Ihr modalen Dialog

<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

versuchen so etwas wie dieses

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

//your code 

}]); 

sehen