Question

我已经听过其他人提出的类似问题，但似乎没有答案适用于我的代码。我有一个从主控制器打开的模态实例。它基于以下HTML：

<div class="modal-header">
    <h3 class="modal-title">Add media</h3>
</div>
<div class="modal-body" style="min-height:auto;">
    <ul class="nav nav-tabs" id="tabContent">
        <li class="active">
            <a data-toggle="tab" data-target="#urlTab" href="">URL</a>
        </li>
        <li>
            <a data-toggle="tab" data-target="#filesTab" href="">Upload files</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="urlTab" class="tab-pane fade in active">
            <form name="form.URLForm" class="form-group">                                
            </form>
        </div>
        <div id="filesTab" class="tab-pane fade">
            <h3>Menu 2</h3>
            <p>Some content in menu 2.</p>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="save()" ng-disabled="form.URLForm.$invalid">Add</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>

触发模态的代码如下：

$scope.openUploadMediaModal = function ($event) {
            $event.stopPropagation();

            modalInstance = $uibModal.open({
                animation: true,
                backdrop: 'static',
                templateUrl: 'properUrl',
                controller: 'ModalCtrl',
                scope: $scope,
                resolve: {
                    files: function () {
                        return $scope.files;
                    }
                }
            }).result.then(function (media) {
                //something
            });
        }

切换标签无效，我不知道为什么。我在第一个选项卡上的所有内容都正常运行，显然，控制器或依赖项没有问题。还有什么呢？

非常非常感谢你！

Answer 1

只需从锚标记（href=""）中删除<a>属性即可成功

Bootstrap选项卡在AngularJS项目中的modal内部不起作用

1 个答案: