Bootstrap angular ui 模态模板未正确显示

Question

因此，当在 table 上选择一行时，我试图显示模态模板。

我遇到的问题是，当单击一行时，会出现一条粗约 2 像素的黑色阴影线。它应该是我猜的模态，但模态实际上并没有完整地包含它的内容。

有什么地方出错了吗？

HTML 索引的代码：

    <!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="ui-bootstrap-tpls-1.3.3.js"></script>
        <script src="index.js"></script>
        <link rel="stylesheet" href="site.css">
    </head>
    <body>
        <div class="containter">
            <div class="jumbotron">
                <h1>JSON to Table</h1>
            </div>
            <div ng-app="myTable" ng-controller="tableCtrl">
                <div id="table1Div" style="background:white;position absolute;">
                    <table class="table table-hover table-bordered" id="peopleTable">
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Age</th>
                            <th>Nickname</th>
                        </tr>
                        <tr ng-repeat="person in people" ng-click="changeRowData(person)">
                            <td>
                                {{person.FirstName}}
                            </td>
                            <td>
                                {{person.LastName}}
                            </td>
                            <td>
                                {{person.Age}}
                            </td>
                            <td>
                                {{person.Nickname}}
                            </td>
                        </tr> 
                    </table>
                </div>
                <div class="centered">
                    <button type="button" class="btn btn-primary" data-ng-click="addEntry()">Add New Entry</button>
                </div>
                <div id="searchFirstName">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Change Table Background Colour: </div>
                        <div class="panel-body">
                            <div id"buttonAndColours">
                                <button class="btn btn-primary" id="tableBackgroundButton" style="float: right">Change</button>
                                <div class="colours" style="background-color:red;"></div>
                                <div class="colours" style="background-color:yellow;"></div>
                                <div class="colours" style="background-color:lightBlue;"></div>
                                <div class="colours" style="background-color:green;"></div>
                                <div class="colours" style="background-color:white;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">Search For First Name in Table:</div>
                        <div class="panel-body">
                            <p>Search: <input type="text" ng-model="searchText"/> First Name being searched for: <u><b>{{searchText}}</u></b></p>
                            <br/>
                            <table class="table table-condensed">
                                <tr>
                                    <th>First Names to be Searched For:</th>
                                </tr>
                                <tr ng-repeat="person in people | filter:searchText">
                                    <td>{{ person.FirstName }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>

模式模板代码：

<div class="modal fade" role="dialog">
    <div class="modal-dialog">   
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Row Data</h4>
            </div>
            <div class="modal-body" name="modalData">
                <form class="form-horizontal form-width" role="form">
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="firstname">First Name:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="firstN" ng-bind="FirstName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="lastname">Last Name:</label>
                        <div class="col-sm-8"> 
                            <input type="text" class="form-control" id="lastN" ng-bind="LastName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="age">Age:</label>
                        <div class="col-sm-8"> 
                            <input type="text" class="form-control" id="ageN" ng-bind="Age">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="nickname">Nickname:</label>
                        <div class="col-sm-8"> 
                            <input type="text" class="form-control" id="nickN" ng-bind="Nickname">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
            </div>
        </div>
    </div>
</div>

Javascript 文件的代码：

var myTable = angular.module('myTable', ['ui.bootstrap']);

myTable.controller('tableCtrl', function($scope, $http, $uibModal) {

$http.get("xxxxxxxxx.json").success(function(response){
    $scope.people = response.People;
});

$scope.changeRowData = function(changeableData) {
    var modalTemplateInstance = $uibModal.open({
        templateUrl: 'modalTemplate.html',
        controller: function($scope) {

        }
    });
}

});

Answer 1

您的浏览器控制台是否输出任何错误（按 f12 或右键单击并 select "inspect element"，然后导航至控制台）。

同样在您的浏览器开发工具中，打开网络窗格并确保它正在录制。那么当你触发你的模态时，它是否成功加载你的模态模板文件？

Answer 2

好的，自己找到解决办法了。 :)

意识到模态模板意味着模态中的一些标签在将模态硬编码到 html 页面时不需要，而在需要它们的地方。

将 modalTemplate 文件重新编辑为：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Row Data</h4>
</div>
<div class="modal-body" name="modalData">
    <form class="form-horizontal form-width" role="form">
        <div class="form-group">
            <label class="control-label col-sm-4" for="firstname">First Name:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" id="firstN" ng-bind="FirstName">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="lastname">Last Name:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="lastN" ng-bind="LastName">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="age">Age:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="ageN" ng-bind="Age">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="nickname">Nickname:</label>
            <div class="col-sm-8"> 
                <input type="text" class="form-control" id="nickN" ng-bind="Nickname">
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
    <button type="submit" class="btn btn-success" data-dismiss="modal">Submit</button>
</div>

Bootstrap angular ui 模态模板未正确显示

Bootstrap angular ui modal template not showing correctly

javascript

forms

angularjs

angular-ui-bootstrap

bootstrap-modal