更改输入数据时,AngularJs不会更新模型

Question

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

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

但是如果我打开模态,并在作者输入中键入内容并关闭它,模型将始终保持当前输入值,因此如果我打开另一位作者进行编辑,模型将不会更新.

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

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/

Answer 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/