Develop Reference

Can't open a modal window in angularjs, using bootstrap

This is my app.js file:
const app = angular.module('CurseTransport', [
'ui.router',
'ui.bootstrap',
'ngMessages',
'raceModule',
])
app.config(['$stateProvider', '$urlRouterProvider', '$qProvider', function($stateProvider, $urlRouterProvider, $qProvider) {
$qProvider.errorOnUnhandledRejections(false)
$urlRouterProvider.otherwise('/races')
$stateProvider
.state('races', {
url : '/races',
templateUrl :'views/races.html',
controller:'racesController'
})
.state('racesInsert', {
url: '/races/insert',
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
$modal
// handle modal open
.open({
template: 'views/racesInsert',
windowClass : 'show',
controller: ['$scope',
function($scope) {
// handle after clicking Cancel button
$scope.cancel = function() {
$scope.$dismiss();
};
// close modal after clicking OK button
$scope.ok = function() {
$scope.$close(true);
};
}
]
})
// change route after modal result
.result.then(function() {
// change route after clicking OK button
$state.transitionTo('races');
}, function() {
// change route after clicking Cancel button or clicking background
$state.transitionTo('races');
});
}
]
});
}])
My view for modal window:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When i click my button for open the modal window, it is not working. I have no error in my console. I also included in my scripts.
My modal is located in a different html file.

Have you read the documentation? https://angular-ui.github.io/bootstrap/#/modal
You need to use templateUrl, not template when referencing your modal template, and be sure to include the file extension:
$modal.open({
templateUrl: 'views/racesInsert.html',
windowClass : 'show',
...
Only use template if you are defining the template inline like this:
$modal.open({
template: '<div class="modal-header"><h1>Modal Heading</h1></div>...',
windowClass: 'show',
...
If you are using an inline template as a script, you need to declare the template with a proper script tag. And, do NOT include the outer dialog container:
<script id="racesInsert.html" type="text/ng-template">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</script>
$modal.open({
templateUrl: 'racesInsert.html',
windowClass : 'show',
...
You did not mention which version of Angular UI Bootstrap you are using. The current version uses $uibModal not $modal as the imported module.

Here is the js function you need to call for modal-
$scope.functionName=function(){
var uibModalInstance = $uibModal.open({
animation: true,
templateUrl: 'html page path',
controller: 'controllerName',
size: 'lg',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'app Name',
insertBefore: '#ng_load_plugins_before',
files: ['js controller file path']
});
}]
}
});
uibModalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
});
}
Call the function functionName when you need to open the popup.
You need to add $uibModal as dependencies in current controller and the model controller should have $uibModalInstance as dependencies.

Angular Bootstrap Modal Add Directive

I have an Angular application which contains a simple timer that resets on a mousemove event. So far I have been able to handle this by adding the ng-mousemove event to my outer most scope. However, when a Angular Bootstrap Modal appears, it is positioned in the DOM after that scope, so the event gets ignored until the modal is closed.
My current application is structured as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
...
</head>
<body>
<div data-ng-controller="shell as vm">
<div ng-mousemove="vm.handleMouseMove()">
...
</div>
// MODAL APPEARS DOWN HERE
<div tabindex="-1" role="dialog" class="modal fade ng-isolate-scope warning in" ...>
</div>
</body>
</html>
Is there a way to:
a.) Add the ng-mousemove directive to the modal wrapper
or
b.) Move the modal into my scope, so that shell is a parent to the modal controller.

Not sure why you need that timer reset behaviour but you could do it like this.
Add your shell controller and ng-mousemove to the body-tag and style your body/html to fill the whole page with css width: 100%; height:100%.
Please have a look at the demo below and this jsfiddle.
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('shell', function($scope, $interval, $modal) {
$scope.test = 'hello world';
this.counter = 0;
var vm = this;
this.moveHandler = function() {
console.log('mouse moved, reset counter!');
vm.counter = 0;
};
var timer = function(iterCount) {
console.log('timer tick', vm.counter);
vm.counter++;
};
var intervalPromise = $interval(timer, 100);
$scope.$on("$destroy", function handler() {
// destruction code here
$interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
});
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
});
// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
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());
});
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.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');
};
});
html, body {
width: 100%;
height: 100%;
}
<script src="https://code.angularjs.org/1.3.1/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body class="wrapper" ng-app="myApp" ng-controller="shell as vm" ng-mousemove="vm.moveHandler()">
<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>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
{{test}}
</div>
</body>

Angular JS :Hide/Close a Modal

I am facing issues while closing the Modal in Angular JS
HTML
<div class="container">
<div class="col-md-12" id="gridSet">
<div class="gridStyle adjustViewPort" ng-grid="gridOptions"></div>
// Here is the HTML template for MODAL.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<p>No Events Found</p>
<p><button class="btn btn-primary" ng-click="myClickEvent()">OK</button></p>
</div>
</script>
</div>
</div>
And in controller.js looks like
$scope.modalInstance=$modal.open({templateUrl: 'myModalContent.html'});
//This should run. But, every time only Cancelled is logged.
$scope.modalInstance.result.then(function() {
console.log('Success'); // This is never executed.
}, function() {
console.log('Cancelled');
})['finally'](function(){
$scope.modalInstance = undefined
});
I have tried to hide the modal by this.$hide(); in myClickEvent But, the function is not called at all.
Code from Plunker from which I have copied the code.
Looking for 1) Hide the modal after few seconds using $timeout
2) Close the modal when user selects OK.
UPDATE
Issue is the Code in Plunker Shows $modalInstance as dependency which I am not able to inject.
Function 'ng-click="myClickEvent()"' calls a function in controller which is as below.
$scope.myClickEvent=function(){
alert('the function is called.');
}
But, the there is no alert.
Thanks for help in advance.

Use close() method:
$scope.close = function () {
$modalInstance.close();
};
<button class="btn btn-warning" ng-click="close()">Close</button>

Angular bootstrap ui modal with same controller instead of new controller

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({])

Angular Bootstrap UI modal not showing

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.