Question

我使用了一个bootstrap模板并将其与AngularJs集成在一起。当我点击调用模态的按钮时，我可以看出调用是有效的，因为“淡入淡出”动画出现了。但是，模态的内容不会显示出来。我在项目中加入了“ui-bootstrap-tpls-0.12.1.min.js”。

author.html：

    <html lang="en" data-ng-app="lmsApp">
        <script src="../js/ui-bootstrap-tpls-0.12.1.min.js"></script>
        <script src="../js/app.js"></script>
        ...
        <body data-ng-controller="authorCtrl">
            ...
            <div class="form-group col-lg-4">
                <button type="button" class="btn btn-default" data-ng-click="showAddAuthorModal()">Add Author</button>
            </div> 
            ...
        </body>
    </html>

app.js：

var lmsModule = angular.module('lmsApp', [ 'ngRoute', 'ui.bootstrap' ]);

lmsModule.controller('authorCtrl', function($scope, $http, $modal) {
    $scope.showAddAuthorModal = function() {
        addAuthorModal = $modal.open({
            templateUrl : "../templates/addAuthor.html",
            controller : "addAuthorCtrl"
        });
    };
});

addAuthor.html（模态的html文件）：

<section data-ng-controller="addAuthorCtrl">
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close"
                        data-ng-click="cancel();">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Add Author</h4>
                </div>
                <div class="modal-body">
                    <input class=" form-control" type="text"
                        placeholder="Please Type Author Name"
                        data-ng-model="addAuthorName" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-md btn-primary"
                        data-ng-click="save();">Save</button>
                    <button type="button" class="btn btn-md btn-danger"
                        data-ng-click="cancel();">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</section>

任何人都知道为什么？提前谢谢！

Answer 1

您需要将模式包装在脚本标记内。删除了淡入淡出和模态类。

<script type="text/ng-template" id="addAuthor.html">
   <section data-ng-controller="addAuthorCtrl">
    <div class="">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-label="Close"
                        data-ng-click="cancel();">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Add Author</h4>
                </div>
                <div class="modal-body">
                    <input class=" form-control" type="text"
                        placeholder="Please Type Author Name"
                        data-ng-model="addAuthorName" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-md btn-primary"
                        data-ng-click="save();">Save</button>
                    <button type="button" class="btn btn-md btn-danger"
                        data-ng-click="cancel();">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</section>
</script>

AngularJs / Bootstrap模式虽然似乎有效，但不会显示出来

1 个答案: