AngularJS 和 Bootstrap 3：模态不会再次打开

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>

我将把未编辑的模态内容留在我的 Angular 控制器文件中：

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

我认为关闭功能无法正常工作是否正确？正如 cmets 所说，这是婴儿的第一个模态:(

解决方案

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

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 = "";
         };

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

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