Bootstrap Angle UI模式模板未正确显示
[英]Bootstrap angular ui modal template not showing correctly
问题描述
因此，我尝试在表格中选择一行时显示模式模板。
我遇到的问题是，当单击一行时，出现一条黑色阴影线，大约2px粗。 我猜它应该是模态，但是模态实际上并不完整。
有什么想法我要去哪里吗？
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">×</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) {
}
});
}
});
2 个解决方案
解决方案1
0 2016-06-18 17:15:57
您的浏览器控制台是否输出任何错误（按f12或右键单击并选择“检查元素”，然后导航到控制台）。
同样在浏览器的开发工具中，打开网络窗格并确保正在录制。 然后，当您触发模态时，它是否成功加载了模态模板文件？
解决方案2
0 已采纳 2016-06-18 17:26:54
好吧，一个人找到解决方案。 :)
意识到模态模板意味着在将模态硬编码到html页面中时，模态中的某些标记不需要在需要它们的地方。
将modalTemplate文件重新映射为：
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
UI Bootstrap Modal弹出窗口无法与AngularJS一起使用
[英]UI Bootstrap Modal popup not working correctly with AngularJS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.