modal-content not setting height to contain content - angularjs

I'm trying to learn Angular and modals just aren't working. The modal will show up, but the modal-content div isn't growing to contain all of the content. Instead, the content just runs out of the bottom of a very short modal. See picture below for what it is doing:
The three mini-paragraphs and the links below are supposed to be inside the modal.
Here is the controller for the "login" page:
MyApp.controller('loginController', ['$scope', '$location', '$translate', '$http', 'browserCheckService', 'modalService', function ($scope, $location, $translate, $http, browserCheckService, modalService) {
'use strict';
$scope.checkBrowser = function() {
if (browserCheckService.browserCheck() === false) {
try {
var settings = {
title: 'Incompatible Browser Warning',
size: 'lg',
templateUrl: 'Pages/browserReject.html',
controller: 'browserRejectController'
}
modalService.DisplayModal(settings);
} catch (err) {
alert(err.message);
}
}
};
$scope.checkBrowser();
}]);
Here is the controller for the browserReject:
MyApp.controller('browserRejectController', ['$scope', '$uibModalInstance', function($scope, $uibModalInstance) {
'use strict';
$scope.close = function () {
$uibModalInstance.dismiss();
}
}]);
Here is the modalService:
angular.module('MyApp').service('modalService', ['$uibModal', function ($uibModal) {
'use strict';
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
size: settings.size
});
}
};
}]);
The browserCheckService is simply set to return to false so I could test the modal.
Here is the browserReject.html contents:
<div id="modalHeaderContainer">
<div id="title">Incompatible Browser Warning</div>
<div id="closeButton">
<button type="submit" class="close" ng-click="close()">X</button>
</div>
</div>
<hr />
<div id="jr_outer">
<div id=jr_inner">
<div id="jr_center">
<p translate={{'application__browser_reject_message'}}"></p>
<ul>
<li>
<a target="_blank" href="http://www.google.com/chrome/>Google Chrome</a>
</li>
<li>
<a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/>Firefox</a>
</li>
<li>
<a target="_blank" href="http://www.apple.com/safari/>Safari</a>
</li>
<li>
<a target="_blank" href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>
</li>
</ul>
</div>
</div>
</div>
Here is my CSS as it currently stands for the modal:
/* CSS for modal settings */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position:absolute;
z-index:9999;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index:10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding:10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
#modalHeaderContainer {
width:100%;
height: 1.5em;
}
#title {
float:left;
font-size:1.7em;
padding-left:.5em;
}
#closeButton {
float:right;
padding-top:.5em;
padding-right:.5em;
}
/* End CSS for modal settings */
I've read the posts here and here, as well as several others and nothing seems to quite fit. I feel as though I'm overlooking something exceedingly simple, but can't find it. I've tried setting max-height on modal-content to 100%, but that doesn't change the display, either.

you should override the default .modal-window by doing something like the following in your css:
.mynewModal-modal-window .modal-window {
width: 100%;
height: 100%;
}
and add its' class as a parameter to the open method of $uibModal:
this.DisplayModal = function (settings) {
if (settings === undefined) {
throw "Settings must be supplied for modal";
} else {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: settings.templateUrl,
controller: settings.controller,
windowClass: 'myNewModal-modal-window',
size: settings.size
});
}
};
I just haven't found a way to override the modal-content yet via the controller :( (would be nice to have something similar)

Not exactly a fit but people looking for answers to uibmodal css overflow questions will need this:
Believe it or not, if you do not set your overflow:hidden or overflow:scroll on anything dynamic that you set a height to, like a repeater in angular, or injected content in jquery the content will simply look as if the modal isn't stretching, when in fact it is doing exactly as intended.

Related

ng-if = 'false' is hiding the DIV

I have the ng-click and ng-if directives on the same div.
Since the click variable is initially set to false the box DIV does not appear. If I set click to true or use !click for ng-if directive, then the box DIV appears but still no animation occurse upon clicking.
If I remove the ng-click from box DIV and add it to another DIV or button to do the toggle, animation works. However, the box DIV is still hidden initially and also disappears after the animation run.
HTML
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="click=!click" ng-if="click" class="box"></div>
</div>
JS
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = false;
})
;
CSS
.box {
width: 40px;
height: 40px;
background-color: indianred;
}
.box.ng-enter {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(0deg);
}
.box.ng-enter-active {
transform: rotateZ(-180deg);
}
.box.ng-leave {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
transform: rotateZ(-180deg);
}
.box.ng-leave-active {
transform: rotateZ(0deg);
}
Demo
https://jsfiddle.net/ae8kwzxg/93/
This line is do nothing: "ng-click="click=!click".
The reason why is not work is because your $scope.click variable is primitive type (bool). It means in this line: ng-click="click=!click" click variable is a copy of your $scope.click variable and you just change the copy but not the actual $scope.click. If you will change your $scope.click variable to object, for example $scope.click = {active:true}
and change your HTML to: <div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div>
It will work.
But better way is always do assignments in function:
<div ng-app="animationApp" ng-controller="c1">
<div ng-click="clicked()" ng-if="click" class="box"></div>
</div>
And your controller will be:
angular.module('animationApp', ['ngAnimate'])
.controller('c1', function ($scope, $animate, $timeout) {
$scope.click = true;
$scope.clicked = function(){
$scope.click = !$scope.click;
}
})
This is working example: https://jsfiddle.net/ae8kwzxg/94/

Restore scope when browser back button is clicked

I am using angular for rendering view like this:
var app = angular.module("demo", []);
app.controller('demoCtrl', ["$scope",function ($scope) {
$scope.current_step = 1;
$scope.step_two = function(){
$scope.current_step = 2;
};
$scope.step_one = function(){
$scope.current_step = 1;
};
}]);
.button {
background: #fb6648;
color: #fff;
display: inline-block;
padding: 18px 0px;
max-width: 150px;
width: 100%;
text-align: center;
border-radius: 3px;
font-size: 18px;
transition: all 0.5s;
outline: none;
border: none;
-webkit-appearance: none!important;
}
.area {
width: 100px;
height: 100px;
display: block;
border: 1px solid;
text-align: center;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demo">
<div ng-controller="demoCtrl" id="demoCtrl">
<div ng-if="current_step==1">
<span class="area" >Step One</span>
<a class="button" ng-click="step_two()" >go to Step Two</a>
</div>
<div ng-if="current_step==2">
<span class="area">Step Two</span>
<a class="button" ng-click="step_one()" >Back to Step One</a>
</div>
</div>
</body>
i want this button to work when browser back and froward button are pressed.
i tried changing hash but it didn't worked.
It seems that you need to store the value of scope as cookie.
That can be done as shown below.
Case-1: Cookies More $cookies
Provides read/write access to browser's cookies.
angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
// Put cookie
$cookieStore.put('myFavorite','oatmeal');
// Get cookie
var favoriteCookie = $cookieStore.get('myFavorite');
// Removing a cookie
$cookieStore.remove('myFavorite');
}]);
Case-2: ngStorage More ngStorage
An AngularJS module that makes Web Storage working in the Angular Way.
var app = angular.module('MyApp', ["ngStorage"])
app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
$scope.Save = function () {
$localStorage.LocalMessage = "LocalStorage: My name is XXX.";
$sessionStorage.SessionMessage = "SessionStorage: My name is XXX.";
}
$scope.Get = function () {
$window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
}
});
More help
how-to-use-ngstorage-in-angularjs
Use $localStorage,
angular.module('myApp')
.controller('MyCtrl',function($scope,$localStorage){
window.onhashchange = function() {
console.log("triggered");
if($localStorage.user != null){
//get value from $localStorage and set it to scope variable
$scope.user = JSON.parse($localStorage.user);
}
}
});
In someother controller you need to set $localStorage.user value as
$localStorage.user = JSON.stringify({'name':'Geo','age':22});
If it is not null you can reassign it to the $scope.user variable.

Not able to update the `scope` value from directive function

Basically, i am using a service for to manage the popup-modal. some point i made the mistake or wrongly i have understand the way of using the service, i am not able to update the scope value here.
my service.js
"use strict";
angular.module("tcpApp").service("modalService", function () {
this.Name = "My Modal";
this.showModal = false; //default false.
});
controller.js:
$scope.modalService.Name = "Mo!" //changing the name works!
$scope.showModal = true; //changing the ng-show works!
here is my directive :
"use strict";
var modalPopup = function ( modalService ) {
return {
restrict : "E",
replace : true,
scope : {
showModal:"=" //getting value from controller.js
},
templateUrl : "views/tools/modalPopup.html",
link : function ( scope, element, attrs ) {
scope.Name = modalService.Name; //if i remove this Name not working!
scope.hideModal = function () {
alert("i am called");
scope.showModal = false; //it's not updating the value!
}
}
}
}
angular.module("tcpApp")
.directive("modalPopup", modalPopup);
here is my html in the index.html :
<modal-popup ng-show="showModal" showModal="showModal"></modal-popup>
here is my template in views/tools/modalPopup.html
<div class='ng-modal'>
<div class='ng-modal-overlay'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{Name}}</div>
</div>
</div>
I am clicking on the hideModal(), But the showModal is not became false and the poup-up modal not closing.
where is the mistake here? and how the way i wrongly understand the service here? or what is the correct way to do this?
Thanks in advance.
You don't need to pass around anything in your view because you have a service setup to do this for you:
(function() {
"use strict";
var app = angular.module("tcpApp", []);
app.controller('someController', function($scope, modalService) {
$scope.modal = modalService;
$scope.modal.Name = "Mo!"
});
app.service("modalService", function() {
this.Name = "My Modal";
this.isOpen = false;
this.hide = function() {
this.isOpen = false;
};
this.show = function() {
this.isOpen = true;
};
});
})();
(function() {
"use strict";
angular.module("tcpApp").directive("modalPopup", function(modalService) {
return {
restrict: "E",
replace: true,
scope: {},
templateUrl: "modalPopup.html",
link: function(scope, element, attrs) {
scope.modal = modalService;
}
}
});
})();
.ng-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.2);
}
.ng-modal-dialog {
width: 300px;
height: 150px;
position: absolute;
left: 50%;
top: 15px;
margin-left: -150px;
z-index: 100;
text-align: center;
background-color: white;
}
.ng-modal-close {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background-color: red;
margin: 5px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='tcpApp'>
<div ng-controller='someController'>
<input type="text" ng-model="modal.Name" />
<button ng-click='modal.show()'>show modal</button>
<modal-popup></modal-popup>
</div>
<script type="text/ng-template" id="modalPopup.html">
<div class='ng-modal' ng-if="modal.isOpen">
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='modal.hide()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{modal.Name}}</div>
<input type=text" ng-model="modal.Name"/>
</div>
</div>
</script>
</div>
Are you getting alert 'i am called'? If yes, try this
alert("i am called");
scope.showModal = false; //it's not updating the value!
scope.$apply(); // add this line it will update scope object value
try this
scope.$apply(function() {
scope.showModal = false;
});

Blueimp gallery not working in angularness when I enable html5mode

I am building my first angular app and everything was going well until I wanted to remove the "#" from the URL.
So far I have built the following:
app.js
var app = angular.module('mosaic', ['ngRoute', 'appServices', 'appControllers', 'appDirectives']);
var appServices = angular.module('appServices', []);
var appControllers = angular.module('appControllers', []);
var appDirectives = angular.module('appDirectives', []);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'http://54.67.25.157/login',
controller: 'AuthenticationController'
}).
when('/activate', {
templateUrl: 'http://54.67.25.157/activate'
}).
when('/mosaic', {
templateUrl: 'http://54.67.25.157/mosaic',
access: { requiredAuthentication: true }
}).
otherwise({
redirectTo: '/'
});
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);
app.config(function($httpProvider) {
$httpProvider.interceptors.push('TokenInterceptor');
});
app.run(function($rootScope, $location, $window, AuthenticationService) {
$rootScope.$on("$routeChangeStart", function(event, nextRoute, currentRoute) {
if(nextRoute != null && nextRoute.access != null && nextRoute.access.requiredAuthentication
&& !AuthenticationService.isAuthenticated && !$window.sessionStorage.token) {
$location.path("/");
}
});
});
Here is my html file:
<body style="" class="ng-scope" ng-app="mosaic">
<!-- ngView: --><div class="container ng-scope" ng-view=""><h4 class="ng-scope"> Hi ABC, </h4>
<div style="height: 402px;" class="ng-scope justified-gallery" id="links" gallery="">
<a style="width: 300px; height: 400px; top: 1px; left: 1px; opacity: 1;" href="/media/DPMosaic_jmJyQrc.jpg" class="justified-gallery jg-entry" ng-href="/media/DPMosaic_jmJyQrc.jpg" title="./DPMosaic_jmJyQrc.jpg" data-gallery="">
<img style="width: 300px; height: 400px; margin-left: -150px; margin-top: -200px;" src="/media/DP_thumbnail_Ktojkqa.jpg">
<div style="opacity: 0; display: block;" class="caption">./DPMosaic_jmJyQrc.jpg</div></a>
<a style="width: 533px; height: 400px; top: 1px; left: 302px; opacity: 1;" href="/media/testMosaic_5HF2z0K.jpg" class="justified-gallery jg-entry" ng-href="/media/testMosaic_5HF2z0K.jpg" title="./testMosaic_5HF2z0K.jpg" data-gallery="">
<img style="width: 533px; height: 400px; margin-left: -266.5px; margin-top: -200px;" src="/media/test_thumbnail_ng2FmDO.jpg">
<div style="opacity: 0; display: block;" class="caption">./testMosaic_5HF2z0K.jpg</div></a>
</div>
I have defined the justified gallery directive and the entire set up works fine until I uncomment 2 lines in app.js
The 2 lines are:
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
The head section of the HTML contains base href="/" as well.
I did this to remove the "#" in the URL and the app which was working fine stopped working.
By stopped working, I mean when I click on the image link in the html, it used to open the gallery in a carousel. After including the above lines I get redirected back to my home page with the following error on my firefox console.
blueimp Gallery: No or empty list provided as first argument." Object
{ length: 0, prevObject: Object, context: HTMLDocument → 54.67.25.157,
selector: "[data-gallery=""]
I am new to AngularJS and have no idea what might have gone wrong. Please help me.
If you want other details about the application, please let me know. The application is hosted at http://54.67.25.157/account
Thanks in advance!
Try this directive:
;(function(
angular, $
) {
'use-strict';
angular.module('mosaic').directive('a', [
function blueImpFix() {
function prevent(e) {
e.preventDefault();
}
function unprevent() {
$(this).unbind('click', prevent);
}
return {
restrict: 'E',
link: function(scope, elem, attrs) {
if('gallery' in attrs) {
elem.bind('click', prevent).on('$destroy', unprevent);
}
return elem;
}
};
}
]);
})(
window.angular,
window.jQuery
);
A more concise version of the solution above.
Set an ng-click on the a tag where you set data-gallery=""
<a ng-click="handleClick($event)" style="width: 300px; height: 400px; top: 1px; left: 1px; opacity: 1;" href="/media/DPMosaic_jmJyQrc.jpg" class="justified-gallery jg-entry" ng-href="/media/DPMosaic_jmJyQrc.jpg" title="./DPMosaic_jmJyQrc.jpg" data-gallery="" >
then prevent event propagation in the controller/directive:
$scope.handleClick = function (event) {
event.preventDefault();
};

Center Angular modal ui

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question:
Twitter Bootstrap - Center Modal Dialog
but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:
http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
js:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close("ok");
};
$scope.cancel = function () {
$modalInstance.dismiss("cancel");
};
};
My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.
You can specify the style class for the modal window by using windowClass attribute while creating modalInstance
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'center-modal'
});
then in your css you can specify the definition for .center-modal like,
.center-modal {
position: fixed;
top: 10%;
left: 18.5%;
z-index: 1050;
width: 80%;
height: 80%;
margin-left: -10%;
}
or specify anything based on your needs
This approach works with any modal size.
.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
The original answer has an example with Plunker.

Resources