Bootstrap Angle UI模式模板未正确显示

Question

So I'm trying to show the modal template when a row is selected on the table. 因此，我尝试在表格中选择一行时显示模式模板。

The problem I am having is that when a row is clicked, a black shadowed line appears which is about 2px thick. 我遇到的问题是，当单击一行时，出现一条黑色阴影线，大约2px粗。 It's supposed to be the modal I'm guessing but the modal isn't actually there in full with it's content. 我猜它应该是模态，但是模态实际上并不完整。

Any ideas where I'm going wrong? 有什么想法我要去哪里吗？

Code for HTML Index: 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>

Code for Modal Template: 模态模板代码：

<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>

Code for Javascript file: 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

Does your browser console output any errors (press f12 or right click and select "inspect element", and navigate to console). 您的浏览器控制台是否输出任何错误（按f12或右键单击并选择“检查元素”，然后导航到控制台）。

Also in your browsers dev tools, open the network pane and make sure it's recording. 同样在浏览器的开发工具中，打开网络窗格并确保正在录制。 Then when you trigger your modal, is it successfully loading your modal template file? 然后，当您触发模态时，它是否成功加载了模态模板文件？

Answer 2

Okay, found the solution alone. 好吧，一个人找到解决方案。 :) :)

Realised that the modal template means that some of the tags in the modal is not needed where they'd be needed when hard coding the modal into the html page. 意识到模态模板意味着在将模态硬编码到html页面中时，模态中的某些标记不需要在需要它们的地方。

Redited the modalTemplate file to: 将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 Angle UI模式模板未正确显示

问题描述

2 个解决方案

解决方案1
0 2016-06-18 17:15:57

解决方案2
0 已采纳 2016-06-18 17:26:54

Bootstrap Angle UI模式模板未正确显示

问题描述

2 个解决方案

解决方案1 0 2016-06-18 17:15:57

解决方案2 0 已采纳 2016-06-18 17:26:54

解决方案1
0 2016-06-18 17:15:57

解决方案2
0 已采纳 2016-06-18 17:26:54