I'm using this modal service to show a basic dialog in an Angular app.
The implementation is simple but there are two issues:
The dialog shows but the modal-backdrop class is repeated multiple times, rendering it completely black.
When closing the dialog, the form closes but the background remains, leaving the view useless. I'm sure this is related to 1.
I'm using Angular 1.4.9 with angular-ui-bootstrap 0.13.4 [2015-09-03]. I've found a couple of posts showing incompatibilities between angular 1.4 and angular-ui-bootstrap but I've not managed to solve this.
Edit - view and controller code:
<button type="button" class="btn btn-sm btn-white" ng-click="procFileCtrl.viewErrors(file)"> <i class="fa fa-eye"></i> </button>
this.viewErrors = function(file) {
ModalService.showModal({
templateUrl: 'modules/components/client/modal/modal-base.html',
controller: 'FileController',
controllerAs: 'fileCtrl',
inputs: {
data: file
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
this.message = result ? 'ok' : 'notok';
});
}).catch(function(error) {
console.log(error);
});
};
modal-base.html
<div class="modal inmodal in" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<!-- header here -->
</div>
<div class="modal-body">
<!-- body here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
Related
I am calling below function on ng-click of a button.
vm.updateSourceAndVisibility = function(skus) {
$log.info("In updateSourceAndVisibility");
var modal = $uibModal.open({
animation: true,
template: require('./source-selection/source.selection.html'),
controller: require('./source-selection/source.selection.controller.js'),
controllerAs: 'sourceSelectCtrl',
backdrop : 'static',
size: 'md'
});
};
When I click that button, a modal comes up having just
/src/app/pages/src/source-selection/source.selection.html
But source.selection.html has this HTML,
<form name="sourceSelectForm" novalidate>
<!-- modal header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="sourceSelectCtrl.close()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Select Sources</h4>
</div>
<!-- modal body -->
<div class="modal-body">
<!-- Source information -->
<div class="row">
I want to put something here
</div>
</div>
<!-- modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="sourceSelectCtrl.close()">Cancel</button>
<button type="submit" class="btn btn-primary" ng-click="sourceSelectCtrl.submit()">Select</button>
</div>
</form>
What did I do wrong?
I am using Mobile Angular UI.
In parent window there is list of category names. I want selected category name should get updated from modal. I am able to display modal. I want to pass selected category item from parent view to modal.
My code in parent view
<div ng-controller="CategoryController as TitleCats">
<div ng-repeat="cats in TitleCats.categories">
<a href=""
ui-turn-on="titleCatUpdatemodal"
class="btn btn-default" ng-click="TitleCats.openUpdateModel(cats)"> {{cats.name}} --> Edit</a>
</div>
<div ui-content-for="modals">
<div ng-include="'pages/titleCatUpdatemodal.html'"></div>
</div>
</div>
My Modal is
<div class="modal" ui-if='titleCatUpdatemodal' ui-state='titleCatUpdatemodal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close"
ui-turn-off="titleCatUpdatemodal">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p><input type="text" ng-model="cats.name" >{{ cats.name }}</p>
</div>
<div class="modal-footer">
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-default">Close</button>
<button ui-turn-off="titleCatUpdatemodal" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
When i click button it opens modal but no value!
Anyone please let me know how to get value in modal. Thanks in advance.
In your controller. you should have something similar to this:
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'templates/myModal.html',
controller: 'myModalCtrl',
resolve: {
myData: function () {
//do stuff
return stuff;
}
}
});
Inside that resolve, you can fill out the function which should then be accessible in your modals controller
I am trying to make the Bootstrap Modal be accessible to screen readers. This means I need to add a role="dialog" or similar to the highest level div of the modal.
My problem is that I can't add anything to the correct level divs as they are generated.
This code adds the role="dialog" to the 2nd highest div of the modal.
<div class="modal-content" role="dialog">
<div class="modal-header">
<div class="alert alert-warning">
<strong>Warning!</strong> Are you sure you want to clear all responses in this section?
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="ok()" role="button" aria-label="Confirm clearing of the entire section">Ok</button>
<button class="btn btn-default" ng-click="cancel()" role="button" aria-label="Deny clearing of the entire section">Cancel</button>
</div>
</div>
I would like to have the role on the shown div, but that one and the parent are generated and I don't have control over them.
I am showing the modal via
$scope.clearSection = function () {
var modal = $modal.open({
controller: clearSectionController,
templateUrl: 'Engine/Views/ClearSectionModal.html'
});
...
}
in angularstrap documentation controller can be a function. but there is no example for this ability.
I am using this code for creating and display a modal using angularStrap:
$scope.openCheckDialog = function(){
var checkModal= $modal({title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller:function(){
console.log("show first log to me!!!");
this.test = function(){
console.log("show other log to me") ;
}
}});
checkModal.$promise.then(checkModal.show) ;
};
and it is my modal template script:
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" ng-show="title">
<button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" ng-bind="title"></h4>
</div>
<div class="modal-body" ng-bind="content"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="test()">Save</button>
</div>
</div>
</div>
</div>
when I open this dialog first log is shown in console but when I click on save button no thing happen.
How about this?
var checkModal= $modal({
title :"test 1",
templateUrl:"temp/checkTemp.html",
show:false,
controller: ['$scope', function($scope){
$scope.test = function () {
console.log("show other log to me");
};
}]
});
Iam able to open the modal when i click on get label
how to pass the scope variable 'item' from myCtrl to modal
code for myModal.html
//below is the modal to show when we click on button in main page and display the item value in the modal-body
//when we click on the save changes how to invoke the method
<div class="modal " tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="$hide()">×</button>
<h4 class="modal-title ng-binding" ng-bind-html="title">Title</h4>
</div>
<div class="modal-body">
{{item}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
<button type="button" class="btn btn-primary" ng-click="modalClose()">Save changes</button>
</div>
</div>
</div>
</div>
//code main html page
<div ng-app="test">
<div ng-controller="myCtrl">
<label ng-click="openModal()">GET</label>
</div>
</div>
****//code in js****
var app = angular.module('test', []);
app.controller('myCtrl',[ui.bootstrap], function($scope,$modal) {
$scope.item= "welcome....";
$scope.openModal= function(){
var myModal = $modal({ title: 'My Title', template: 'modalEx.html', show: true });
myModal.$promise.then(myModal.show);
}
});
You need to add a resolve and controller field in modal config. For example:
resolve: {
items: function () {
return $scope.items;
}
},
controller: 'ModalInstanceCtrl'
and in your modal controller:
controller('ModalInstanceCtrl', function ($scope, $modalInstance, items)
You have items on items varible.