I'm trying to use the modal from angular ui bootstrap, but it is not showing although the window is blur when the code to show the modal executes,
the codes for the modal is:
<script type="text/ng-template" id="test.html">
<div class="modal-header">
<h3>XXXX</h3>
</div>
<div class="modal-body">
<p>XXXX</p>
</div>
<div class="modal-footer">
xxxxxx
</div>
</script>
the button to show the modal:
<div class="container-fluid" ng-controller="MainController">
<button ng-click="showModal()" ></button>
</div>
the controller:
var app = angular.module('angularjs-starter', ['ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: '/home.html'
});
}]);
app.controller('MainController', function($scope, $rootScope, $modal) {
$scope.showModal = function() {
$modal.open({templateUrl:'test.html', backdrop: true,windowClass: 'modal'});
};
});
Is there any problem with the above codes?
Mine problem was that I included both js files ( ui-bootstrap.min.js and ui-bootstrap-tpls.min.js) when i should have only loaded 'ui-bootstrap-tpls.min.js' . After that it worked like a charm.
I had the same issue and using :
windowClass : 'show'
in the $modal.open function did the trick.
AngularUI modal's documentation says
windowClass - additional CSS class(es) to be added to a modal window template
Which class is this 'modal' you are using. Is this class defined somewhere by you? Shouldn't be a issue, but try removing that.
Related
I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals.
I'm calling a Modal in my controller like so:
var modalInstance = $modal.open({
animation: true,
templateUrl: '/static/templates/support-report-modal.html',
controller: 'ModalInstanceCtrl'
});
Unfortunately, when I want to close the Modal by using:
modalInstance.close();
The modal itself dissapears, and the backdrop also fades out, but it isn't removed from the DOM, so it overlays the whole page leaving the page unresponsive.
When I inspect, I'm seeing this:
In the example in the Documentation on https://angular-ui.github.io/bootstrap/#/modal The class modal-open is removed from body and the whole modal-backdropis removed from the DOM on close.
Why is the Modal fading out but the backdrop not removed from the DOM in my example?
I've checked out many of the other questions about the backdrop of bootstrap Modals but I can't seem to figure out what's going wrong.
This is apparently due to a bug. AngularUI doesn't support Angular 1.4 yet. Once http://github.com/angular-ui/bootstrap/issues/3620 is resolved this will work.
Until the team gets this sorted here is a work around.
<div class="modal-footer">
<button class="btn btn-primary"
ng-click="registerModal.ok()"
remove-modal>OK</button>
<button class="btn btn-warning"
ng-click="registerModal.cancel()"
remove-modal>Cancel</button>
</div>
/*global angular */
(function () {
'use strict';
angular.module('CorvetteClub.removemodal.directive', [])
.directive('removeModal', ['$document', function ($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
$document[0].body.classList.remove('modal-open');
angular.element($document[0].getElementsByClassName('modal-backdrop')).remove();
angular.element($document[0].getElementsByClassName('modal')).remove();
});
}
};
}]);
}());
Unfortunately it appears that the team is not on the same page concerning this issue as it was pushed to a separate thread by a contributor and then the thread it was pushed to was closed by another as it was considered "off topic" by another.
Simply you can do like this, first close the modal u have opened
$('#nameOfModal').modal('hide');
basically id of modal Second this to remove if any
$('body').removeClass('modal-open');
lastly to close backdrop
$('.modal-backdrop').remove();
<button type="button" class="close" onclick="$('.modal-backdrop').remove();"
data-dismiss="modal">
$(document).keypress(function(e) {
if (e.keyCode == 27) {
$('.modal-backdrop').remove();
}
});
I am using Angular version 1.3.13 and have a similar issue. I been researching the problem and believe this bug extends from angular version 1.3.13 to 1.4.1 details here https://github.com/angular-ui/bootstrap/pull/3400
And if you scroll to the bottom of that link you will see a post by fernandojunior showing the versions he tested and upgraded to still showing the same issue. He even created a plnker to simulate the issue http://plnkr.co/edit/xQOL58HDXTuvSDsHRbra and I've simulated the issue in the code snippet below using the Angular-UI modal code example.
// angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular
.module('ui.bootstrap.demo', [
'ngAnimate',
'ui.bootstrap',
]);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<!-- angular 1.4.1 -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<!-- angular animate 1.4.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-animate.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
In you submit button or which ever button/selection that moves you to another page, just have data-dismiss="modal" and that should take care of the back drop. It is just telling to dismiss the modal when you have made your selection.
I am also using Angular 1.3.0 and I am also using UI bootstrap-tpls-0.11.2 and for some reason my issue was happening when I was redirecting to the new page and the backdrop was still displaying, so I ended up adding this code...
.then(function () {
$("#delete").on('hidden.bs.modal', function () {
$scope.$apply();
})
});
which I actually found here....
Hide Bootstrap 3 Modal & AngularJS redirect ($location.path)
I'm trying to execute Javascript in a ionic modal (HTML) page. It may sound weird, because normally it think you put JS code into a JS file and use data binding to work with js in html, right? But in this case i only can change this specific html file.. So this is what i tried:
<div class="modal">
<ion-header-bar class="bar-secondary">
<h1 class="title">TEST-TITLE</h1>
<button class="button button-clear button-dark" ng-click="modal.hide()"><i class="icon ion-close"></i></button>
</ion-header-bar>
<ion-content class="has-header" delegate-handle="TEST">
<div class="list card">
<div class="item item-body" ng-App="myApp" ng-controller="myCtrl">
<img src="pathToFile.jpg" class="full-image">
<p>
TEXT
</p>
<button class="button button-positive" ng-click="testFunction()">
TEST-BUTTON
</button>
</div>
</div>
</ion-content>
</div>
<script>
var app = angular.module('myApp', ['ionic']);
app.controller('myCtrl', function($scope) {
$scope.testFunction = function () {
$scope.firstName = "John";
$scope.lastName = "Doe";
alert($scope.firstName);
};
});
</script>
But i cannot run the function "testFunction()" after clicking on TEST-BUTTON. Does anyone know what to do?
Update:
This is how the modal is called in the extended js file:
// Fetch the modal and store it in scope
$ionicModal.fromTemplateUrl('pathToModal', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal;
});
I have my main template called home.html, the controller is homeController applied throw :
$routeProvider :
$routeProvider
.when ("/", {
templateUrl : "views/home.html",
controller : "homeController"
});
$routeProvider
.otherwise ({
redirectTo:'/'
});
works fine. I have seperate html template for header' which included in thehome.html` like this:
<div class="content">
<ng-include src="'/views/header.html'"></ng-include>
<div class="globe">
<div class="progName">
<div class="swiper"></div>
<h2 class="active">
<span class="title">
{{activeApp.name}}
</span>
<span class="note">{{activeApp.note}}</span>
</h2>
<h2 class="que t{{$index+1}}" ng-click="activate(app)" ng-repeat="app in queApp">{{app.name}}</h2>
</div>
for the header i have seperate controller called 'header.jswhich is included in theindex.html` file.
<script src="app.js"></script>
<script src="js/script/factory/server.js"></script>
<script src="js/script/controllers/header.js"></script>
<script src="js/script/controllers/homeController.js"></script>
<script src="js/script/directives/home/programNames.js"></script>
In the header, there is a class, i want to apply by conditionally, so i added the condition in the header.html file (which is included)
in the header.js (headerController) I am trying to add the conditonal class, but not working:
my header.js:
angular.module("tcpApp")
.controller('header', ['$scope', function ($scope) {
$scope.show = false;
$scope.menuHandler = function () {
$scope.show = !$scope.show;
console.log("i am called");
}
}]);
What i am missing here? the way i am adding the controller is wrong? or i need to write the function withing parent controller homeController itself?
can't I keep seperate controller for header and include with other template?
Andy one help me handle?
Thanks in advance.
UPDATE
Header html :
<header ng-controller="header" >
<h1>TCP</h1>
<nav>
<a class="menu" ng-click="menuHandler()" href="#">Menu</a>
<span ng-class="{'activate':show}">
<span>All</span>
<span>Important</span>
<span>Design</span>
<span>Supply</span>
<span>Contruction</span>
<span>Issue Log</span>
</span>
</nav>
</header>
Try something like this in your home.html :
<div class="content">
<ng-include src="views/header.html"></ng-include>
//code here
</div>
Remove the '/' at the starting of the path of header.html template.
This should do the trick, I guess.
try something like this:
<span ng-class="show?'activate':'other-class'">
the problem is, I am using a module for scroll purpose. when i comment that, it works.
var newHash = 'anchor3';
if ($location.hash() !== newHash) {
$location.hash('anchor3');
} else {
$anchorScroll();
}
I commented all above. thanks every one!
I am using angular bootstrap ui modal box it says to give a new $modalInstance for new controller.I want to use the same controller where i have initialized the modal box.I searched but no success.I found this links but no success -
How to use the same controller for modal and non-modal form in Angular UI Bootstrap?
Angular-ui bootstrap modal without creating new controller
app.controller('UserCtrl',['$scope','$filter','ngTableParams','$modal',function($scope, $filter, ngTableParams,$modal) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl', //Instead of this i want to use the same controller 'UserCtrl'
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
} ]);
So that i can call the save function on this same controller which is called on save click of modal box
It was possible in older version of UI-Bootstrap 0.10.0
Download Library.Even latest version,it works for me
index.html
<!-- if you are using Bower -->
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>
<!-- button click opens modal-->
<button ng-click="openModal()">Button test</button>
<!-- modal -->
<!-- look at 'type' and 'id' values -->
<script type="text/ng-template" id="myTestModal.tmpl.html">
<div class="modal-header">
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>Modal Body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary" ng-click="doSomething()">Do Something
</button>
</div>
</script>
modalDemoController.js
$scope.openModal=function(){
$scope.modalInstance=$modal.open({
templateUrl: 'myTestModal.tmpl.html',
scope:$scope
});
}
$scope.close=function(){
$scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};
$scope.doSomething=function(){
//any actions to take place
console.log("Do Something");
}
I had a similar issue, but I managed to fix it by removing the controller inside of the $uibModal.open({])
I am trying to get at an angular form in scope to verify validations etc.
Base Case
Let us say I have the following HTML:
<body ng-controller='MyAwesomeController'>
<form name="fooForm">
<textarea ng-model="reason" required=""></textarea>
</form>
<div class='btn btn-primary' ng-click="submit()" ng-class="{'btn-disabled': true}">Awesome Submit Button</div>
</body>
And the following controller
angular.module('MyAwesomeController', '$scope', function(scope){
scope.submit = function(){
console.debug(scope)
}
})
This will work, and upon inspection, scope will contain a fooForm key.
Let us now say that I introduce an angular ui bootstrap modal into the mix like so:
Broken Case
<body ng-controller="AwesomeParentController">
<div class="btn btn-primary" ng-click="open()">Open the Modal</div>
</body>
with the following two controllers:
.controller('AwesomeParentController', ['$scope', '$modal', function(scope, modal){
scope.open = function(){
options = {
windowClass: 'modal discontinue-modal',
templateUrl: 'modal.html',
controller: 'AwesomeModalController'
}
modalInstance = modal.open(options)
modalInstance.result.then(function(){
console.debug("result!")
})
}
}])
.controller("AwesomeModalController", ['$scope', '$modalInstance', function(scope, modalInstance){
scope.submit = function(){
console.debug(scope)
}
}])
with the following modal.html:
<form name="fooForm">
<textarea ng-model="reason" required=""></textarea>
</form>
<div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div>
When the first button is clicked, a modal opens, the second button click prints a scope, which does NOT contain fooForm, rather fooForm resides on scope.$$childTail
Plunkr: http://embed.plnkr.co/jFGU0teIbL3kUXdyTPxR/preview
Possible Fix
<form name="fooForm">
<div ng-controller ="JankyFormController">
<textarea ng-model="reason" required=""></textarea>
<div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div>
</div>
</form>
.controller('JankyFormController', ['$scope', function(scope){
scope.models['fooForm'] = scope.fooForm
}])
Plunkr: http://embed.plnkr.co/BAZFbS7hFRhHm8DqOpQy/preview
Why is the form being masked? What would be a clean way to get at it without having to create a nested child controller? what if I want to bind ng-class to the forms validity? Would I now have to construct a watch around ($$childTail).fooForm.$valid?
Update: angular ui-bootstrap 0.12.0 fixes the problem - transclusion scope becomes the same as controller's scope, no need for $parent.. Just upgrade.
Before 0.12.0:
Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope. This happens with form directive.
This is known issue: https://github.com/angular-ui/bootstrap/issues/969
I proposed the quick workaround which works for me, with Angular 1.2.16:
<form name="$parent.userForm">
The userForm is created and available in modal's controller $scope. Thanks to scope inheritance userForm access stays untouched in the markup.
<div ng-class="{'has-error': userForm.email.$invalid}"}>