我试图隐藏并在我的html中显示特定div中的内容以获取弹出窗口。
home.html的
<div role="main" class="container theme-showcase">
<div class="" style="margin-top:90px;">
<div class="col-lg-8">
<div class="page-header">
<h2 id="tables">Search people</h2>
</div>
<div class="bs-component" ng-controller="homeCtrl">
<div class="alert alert-info" ng-hide=true>
<p>Sort key: {{sortKey}}</p>
<p>Reverse: {{reverse}}</p>
<p>Search String : {{search}}</p>
</div>
<form class="form-inline">
<div class="form-group">
<label >Search</label>
<input type="text" ng-model="search" class="form-control" placeholder="Search">
</div>
</form>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span></span>
</th>
<th ng-click="sort('firstName')">First Name
<span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('lastName')">Last Name
<span class="glyphicon sort-icon" ng-show="sortKey=='lastName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
<th ng-click="sort('profession')">Job Title
<span class="glyphicon sort-icon" ng-show="sortKey=='profession'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-click="showModal($event, user.emailAddress)" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td ><img src = {{user.profileImageUrl}} width="100" height="100"><img></td>
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
<td>{{user.profession}}</td>
</tr>
</tbody>
</table>
</div>
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
<!-- start -->
<div class="panel-heading">
<div ng-show="showAlert" >
<div ng-include="'views/alert.html'"></div>
</div>
</div>
</div>
</div>
弹出式详细信息，从home.html调用
<div ng-show="showAlert" >
<div ng-include="'views/alert.html'"></div>
</div>
alert.html
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: block; padding-right: 15px;" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="height: 3em;">
<button type="button" ng-click="closeModal()" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div ng-show="showDetails">
<div><h3 class="text-danger">Job Title</h3></div> <!-- ithink you can change it-->
<div><span class="genericText">{{alert.profession }}</span></div>
<div class="genericText"><h3 class="text-danger">Approved Organisation</h3><div>
<div><span class="genericText">{{alert.organisation}}</span></div>
<div><h3 class="text-danger">Department</h3></div>
<div><span class="genericText">{{alert.department}}</span></div>
</div>
</div>
<div style="text-align:center; padding-top:2em" >
<button type="button" ng-click="showRequestForm()" class="btn btn-default">Request Person</button>
</div>
</div>
<!-- FORM -->
<!-- pass in the variable if our form is valid or invalid -->
<form name="requestForm" style="text-align:center" ng-submit="requestForm(requestForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->
<!-- EMAIL -->
<div id='genericText' style="display:inline-block; vertical-align:top;" class="form-group" ng-class="{ 'has-error' : requestForm.email.$invalid && !requestForm.email.$pristine }">
<input type="text" name="email" style="width:20em; height:3em; border-radius:0px" class="form-control" placeholder="Email Address" ng-model="email" required>
<!-- !loginForm.email.$pristine == false has not been used yet !-->
<p ng-show="requestForm.email.$invalid && !requestForm.email.$pristine" class="help-block">Enter a valid email</p>
</div>
<br>
<!-- SUBMIT BUTTON -->
<button type="submit" id='submitButton' class="btn btn-primary" ng-disabled="requestForm.$invalid">Send Request</button>
</form>
<!-- end -->
</div>
</div>
</div></div></div></div></div>
</div>
最后是控制器home.js中的代码
<div ng-show="showDetails">
home.js
'use strict';
//app global variable
//this is the controller that handles post requests
//declare services as dependecies $http, $location, custom service apiServiceWeb
app.controller('homeCtrl', function($scope, $http, $cookies, $rootScope, $location, loggedInStatus, setCredentials, apiServiceWeb) {
//get cookie, and then make api call
var cookieData = setCredentials.getCookie('globals');
console.log(cookieData);
console.log("email " + cookieData.auth.username);
console.log("userType " + cookieData.auth.userType);
console.log("token " + cookieData.auth.token);
var ctr_scope = $scope;
$scope.users = []; //declare an empty array
$scope.alert = {};
$scope.showAlert = false;
$scope.users = [{
"busy": false,
"emailAddress": "test@test",
"userType": "test",
"title": "test",
"firstName": "test",
"lastName": "test",
"dob": "tset",
"profession": "test",
"jobTitle": "test",
"profileImageUrl": "test.jpg"
}];
$scope.sort = function(keyname) {
$scope.sortKey = keyname; //set the sortKey to the param passed
$scope.reverse = !$scope.reverse; //if true make it false and vice versa
}
/*$scope.test = function(text) {
alert(text);
//go to persons profile page
}*/
$scope.showModal = function(event, id) {
//get object
var user = $scope.users.filter(function(o) {
return o.emailAddress == id
})
if (user[0]) {
$scope.$parent.alert.profession = user[0].profession;
$scope.$parent.alert.department = user[0].jobTitle;
$scope.$parent.alert.organisation = 'test';
}
console.log($scope);
$scope.$parent.showAlert = true;
$scope.showDetails = false;
};
$scope.closeModal = function() {
$scope.showAlert = false;
};
$scope.showRequestForm = function(){
//show request form
};
});
我试过了
$scope.$parent.showDetails = true;
和
$scope.showDetails = true;
然后它显示一个空的弹出窗口，无法检测状态。
知道为什么会发生这种情况，谢谢
答案 0 :(得分：-1)
你的ng-show很可能正常工作。特别是当你说它只是显示一个空div。 我认为你的问题是你要包含一个默认隐藏的bootstrap模态。
尝试删除包含“views / alert.html”
的ng-include的ng-show使用Javascript触发show modal：
$('#myModal').modal('show')
答案 1 :(得分：-1)
您应该使用自举模式的角度版本 https://angular-ui.github.io/bootstrap/#/modal