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

因此，测试用例将是：

点击修改 - ＆gt;改变价值 - ＆gt;关闭模态

点击其他作者的编辑。

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/

Answer 2

我已经改变了你的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>

Answer 3

尝试这样的事情

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

//your code

}]);

当输入数据发生变化时，AngularJs不会更新模型

3 个答案: