當輸入數據發生變化時，AngularJs不更新模型

我有使用指令的角度應用程序。在指令中我有定義彈出模式的模板。當輸入數據發生變化時，AngularJs不更新模型

基本上，這是非常簡單的應用程序，顯示本書作者的列表，然後在列表中有打開模式對話框的編輯按鈕。如果我打開編輯書籍作者的模式，並關閉它，而不編輯作者 - 這是沒有問題的。

但是，如果我打開模式，然後在作者輸入中鍵入內容並關閉它，那麼模型會一直停留在當前輸入值，所以如果我打開另一個作者進行編輯，模型將不會被更新。

我的問題是：爲什麼會發生這種情況，以及如何解決它？

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>

角

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

因此，測試案例是：

點擊編輯 - >更改值 - >關閉模式

單擊編輯另一位作者。

的jsfiddle：http://jsfiddle.net/HB7LU/17694/

來源

2015-09-17 ToTa

模型值是變化的，然而要創建一個新的變量，而不是修改陣列的原始元素。

您可以通過將所述陣列的對象的指針在變量

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

然後指向NG-模型提供給對象的屬性.Author一個範圍改變這種狀況。

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

查看修改的jsfiddle：http://jsfiddle.net/9a2jcc9u/1/

來源

2015-09-17 14:52:33

我已經改變了你的JS提琴，如果要更改名稱，並將其在電網自動改變比去除angular.copy（書），並直接指定的書。你可以在這裏看到你的jsfiddle 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-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>

來源

2015-09-17 15:36:08

嘗試這樣的事情

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

//your code 

}]);

來源

2015-10-29 15:05:00

當輸入數據發生變化時，AngularJs不更新模型

回答

相關問題