我想在点击角度时创建一个弹出窗口,问题是如果我使用模态弹出窗口,当点击弹出窗口外,它会自动消失。所以我想在同一页面上传递div onclick,任何人都可以告诉我如何使用它角度。提前谢谢!
答案 0 :(得分:1)
如果您在单击弹出窗口时不自动想要disappers。弹出窗口打开时,您可以将backdrop
设置为static
。
$modal.open({backdrop:'static'})
答案 1 :(得分:0)
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Visitors List</h3>
<div class="box-tools">
<div class="input-group">
<input type="text" name="table_search"
ng- model="query" class="form-control input-sm pull-right"
style="width: 150px;" placeholder="Search"/>
<div class="input-group-btn">
<button class="btn btn-sm btn-default">
<i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<div ng-controller="MainCtrl" class="container">
<table class="table table-hover" ng-model="artists" >
<tr>
<th>Name</th>
<th>Profile</th>
<th>First Name</th>
<th>Date</th>
<th>Status</th>
<th>Reknown</th>
</tr>
<tr ng-repeat="item in artists"
style="cursor:pointer;">
<!--Actually it's not a name
and email, it's a chat box, I'm tyrying to build while click on
the visitors list, the chat box has to be displayed in the form of
popup like facebook, gmail. but i'm new to angular. -->
<modal title="Chat box" visible="showModal">
<form role="form">
<div class="form-group">
<label for="text">"name"</label>
<input type="text" class="form-control"
id="email" placeholder="Name" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-
default">Send</button>
</form>
</modal>
<td ng-click="toggleModal(artists.indexOf(item))" >
<span value="{{artists.indexOf(item)}}"></span>{{item.name}}</a>
</td>
<td ng-click="toggleModal()"><span value="
{{artists.indexOf(item)}}">
</span><img ng-src="images/{{item.shortname}}_tn.jpg"
width="35" height="35" alt="profile"></td>
<td ng-click="toggleModal()"><span value="
{{artists.indexOf(item)}}"></span><h5>{{item.shortname}}</h5></td>
<td ng-click="toggleModal()"><span value="
{{artists.indexOf(item)}}"></span>11-7-2014</td>
<td ng-click="toggleModal()"><span value="
{{artists.indexOf(item)}}"></span><span class="label label-
success">Approved</span></td>
<td ng-click="toggleModal()"><span value="
{{artists.indexOf(item)}}"></span>{{item.reknown}}</td>
<tr>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
var myApp = angular.module('myApp', [
'ngRoute',
'myApp'
]);
myApp.controller('ListController', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
$scope.whichItem = $routeParams.itemId;
});
}]);
myApp.controller('MainCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {
$http.get('angular/data.json').success(function(data) {
$scope.showModal = false;
$scope.artists = data;
$scope.whichItem1 = $routeParams.itemId;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
});
}]);
myApp.directive('modal', function () {
return {
template: <!--In this place I want to pass my own coustomized
html which doesnot close on click outside -->
'<div class="modal">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});