输入数据更改时，AngularJs 不会更新模型答案

【问题标题】：AngularJs doesn't update the model when the input data is changed输入数据更改时，AngularJs 不会更新模型
【发布时间】：2015-12-14 11:40:13
【问题描述】：

我有使用指令的角度应用程序。在指令中，我有定义弹出模式的模板。

基本上，这是一个显示书籍作者列表的非常简单的应用程序，在列表中有一个编辑按钮可以打开 模态框。如果我打开编辑书籍作者的模式，然后关闭它，而不编辑作者 - 没有问题。

但是如果我打开模态框，在作者输入中输入一些东西，然后关闭它，模型会一直卡在当前输入值，所以如果我打开另一个作者进行编辑，模型将不会更新了。

我的问题是：为什么会发生这种情况，以及如何解决？

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/

【问题讨论】：

标签： javascript angularjs angularjs-directive modal-dialog

【解决方案1】：

模型值正在改变，但是您正在创建一个新变量而不是修改数组的原始元素。

您可以通过将数组对象的指针放在作用域变量中来更改它

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

然后将 ng-model 指向对象的 .Author 属性。

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

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

【讨论】：

【解决方案2】：

我已经更改了您的 JS 小提琴，如果您想更改名称并且它会在网格中自动更改，而不是删除 angular.copy(book) 并直接分配 book。你可以在这里看到你的 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>

【讨论】：

【解决方案3】：

试试这样的

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

//your code

}]);

【讨论】：