Question

我有一个奇怪的问题，在第二次尝试打开一个模态，我认为它与无法正常关闭有关。我非常有角度的n00b，所以我不确定我做的事情显然是错的。模态首次打开，如果我取消，它将再次打开（并且永远不会出错）。当我提交时，它将第一次工作，并将数据传递给其他函数，但是如果我第二次尝试打开模态，我会收到此错误：

TypeError: v2.addCounter is not a function
at fn (eval at <anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:13567:15), <anonymous>:4:364)
at callback (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:23934:17)
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:16251:28)
at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:16351:25)
at HTMLButtonElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:23939:23)
at HTMLButtonElement.m.event.dispatch (http://code.jquery.com/jquery-1.11.2.min.js:3:8549)
at HTMLButtonElement.r.handle (http://code.jquery.com/jquery-1.11.2.min.js:3:5252)

我正在使用angularJS（1.4.9），bootstrap（tpls-1.1.1）和jquery（jquery-1.3.2）。

这是我的模态的骨架。

<script type="text/ng-template" id="addcounter.html">   
<ng-form name="vm.addCounterForm">
    <div class="modal-header">
        <h3 class="modal-title">Add Counter</h3>
    </div>
    <button type="button" style="btn" ng-click="vm.cancel()">Cancel</button>
    <span ng-show="materialDistributor && materialManufacturer && materialColourGroup && materialDescription">
        <button type="button" style="btn" ng-click="vm.saveCounterModal(A bunch of ng-model stuff being sent)">Save Counter
        </button>
    </span>
</ng-form>

我要在我的角度控制器文件中保留未经编辑的模态：

//baby's first modal
    vm.addCounter = function (groupIndex, size) {
        var modalInstance = $uibModal.open({
          animation: true,
          templateUrl: 'addcounter.html',
          controller: ['$uibModalInstance', 'materials', 'groupIndex', addTableCtrl],
          controllerAs: 'vm',
          size: size,
          resolve: {
            materials: function() {return vm.materials},
            groupIndex: function() {return groupIndex}
            }
        });

        modalInstance.result.then(function (counter) {
            //console.log(counter.width, counter.length, counter.shape, counter.material, counter.index);
            vm.saveCounter(counter.width, counter.length, counter.shape, counter.material, counter.index, counter.groupIndex, counter.description);
        }, function () {
        console.log('Modal dismissed at: ' + new Date());
        });
    };

    var addTableCtrl = function($uibModalInstance, materials, groupIndex) {
        var vm = this;
        vm.materials = materials;
        vm.groupIndex = groupIndex;
        vm.saveCounterModal = function(width, length, shape, material, index, description) {
            var counter = {
                width: width,
                length: length, 
                shape: shape, 
                material: material,
                index: index,
                groupIndex: groupIndex,
                description: description
            };

            $uibModalInstance.close(counter);
        };

        vm.cancel = function() {
            $uibModalInstance.dismiss('cancel');
        };
    }

我认为关闭功能无法正常工作吗？正如评论所说，这是宝贝的第一个模式:(

解

“保存”按钮我有一个不再使用的功能。该函数被调用时，而不是在该行处出错，整个模态显示为错误的原因。希望这可以帮助其他人解决这个问题！

Answer 1

因此当你点击“保存”按钮关闭模态并运行一个函数时，会调用下面的代码。

modalInstance.result.then(function (counter) {
        vm.saveCounter(counter.width, counter.length, counter.shape, counter.material, counter.index, counter.groupIndex, counter.description);
    }, function () {
    console.log('Modal dismissed at: ' + new Date());
    });

在被调用函数（vm.savecounter）中，有一个函数调用了另一个函数（vm.hideCounter - 如下所示），我忘了删除它。这个函数基本上清除了一些下拉列表和文本框，现在它们处于模态中。

//Basically none of these things are in the DOM since I moved them to the modal.
        vm.hideCounter = function() {  
             vm.addCounter = false;
             vm.shape = "",
             vm.counterWidth = "",
             vm.counterLength = "",
             vm.materialColourGroup = "",
             vm.materialDistributor = "", 
             vm.materialManufacturer = "",
             vm.materialColourGroup = "";
         };

所以基本上（这是我的解释），他们试图操纵模态中的东西，而不是主页面的一部分。操作尝试（清除不再存在的文本框）仅在第二次尝试时出错，这对我来说仍然很奇怪。

听起来这可能是一个错误，应该在第一次尝试时出错吗？

AngularJS和Bootstrap 3：Modal不会再次打开

1 个答案: