Question:
I can't find a solution how to get the Datepicker to work, in a modal in Angular. (Please see my code sample below)
Sample Code:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal', function($scope, $uibModal){
$scope.open = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}]);
<!doctype html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
I've also created a plunker for the code sample.
You didn't call / implement the date picker directive on the input field. More precisely, the directive notation changed (to uib-) for angular ui-bootstrap during one of the version changes.
Thus the the correct syntax for your version is:
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Key being to add the uib-datepicker-popup property as stated above.
Running sample:
var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', ['$scope', '$uibModal',
function($scope, $uibModal) {
$scope.open = function() {
$uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
}
]);
app.controller('ModalInstanceCtrl', ['$scope', '$uibModalInstance',
function($scope, $uibModalInstance) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}
]);
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-app="demo">
<div ng-controller="MainCtrl" class="container">
<button class="btn btn-default" ng-click="open()">Open Modal</button>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Modal with a DatePicker</h3>
</div>
<div class="modal-body">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened" uib-datepicker-popup />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</body>
</html>
Related
I am new to angularJS, also in web development, so here is my problem: I tried to create a book store webpage, where the user utilizes a modal to input data, the problem is when, trying to create a controller for the modal, for the cancel button, it give me the error that you see in the title, that is:
"angular.js:14961 Error: [$injector:unpr]".
I search a lot, but I don't find any solution. I can open the modal.
note: I am not a native English speaker, I tried in the Spanish page, without luck. I hope you can help me.
The code:
my index.html
<!DOCTYPE>
<html >
<head>
<meta charset="UTF-8">
<title>Book Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-app="app" ng-controller="myController as ctrl">
<h1>Welcome to book store</h1>
<table >
<tr>
<th>Titulo</th>
<th>Autor</th>
<th>Editorial</th>
<th>Edicion</th>
</tr>
<tr ng-repeat="x in listaLibros">
<td>{{x.name}}</td>
<td>{{x.autor}}</td>
<td>{{x.editorial}}</td>
<td>{{x.edition}}</td>
</tr>
</table>
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src= "app.js" ></script>
</html>
the agregarLibro.html
<html>
<body></body>
<div class="modal-content">
<div class="modal-header" ng-app="app">
<h4 class="modal-title">Agregar libro</h4>
<div class="modal-body">
<h6>Titulo</h6>
<input type="text" ng-model="listaLibros.name">
<h6>Autor</h6>
<input type="text" ng-model="listaLibros.autor">
<h6>Editorial</h6>
<input type="text" ng-model="listaLibros.editorial">
<h6>Edicion</h6>
<input type="text" ng-model="listaLibros.edition">
</div>
<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="$ctrl.cancel()">X</button>
<button type="button" class="btn btn-success">Agregar libro</button>
</div>
</body>
</html>
and the app.js
var app = angular.module("app", ['ui.bootstrap']);
app.controller("myController",function($scope, $http, $uibModal,){
var control = this;
$http.get("dataLibros.json")
.then(function(response){
$scope.listaLibros = response.data;
});
control.open = function(){
var modalInstance = $uibModal.open({
templateUrl: "agregarLibro.html",
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
})
}
});
app.controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
There are few mistakes,
(i) You need to embed the scripts within the body tag, not oustside the body tag
<div class="form-group">
<button type="button" uib-tooltip="Click this button to do something amazing." class="btn btn-primary">Hover to show Tooltip</button>
</div>
<button type="button" class="btn btn-default" ng-click="control.open()">Open me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
(ii) You should use `ng-click="ctrl.open()"
<button type="button" class="btn btn-default" ng-click="ctrl.open()">Open me!</button>
(iIi)Remove ng-app from your modal, there can be only one ng-app in an application
<div class="modal-header" ng-app="app">
DEMO
I want to add model dialog in my project.
My html code is like:
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
And My app.js is like this:
var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
app.controller("bodyController", function($scope) {
$scope.open = function() {
$scope.showModal = true;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
I have added angular UI Bootstrap JS in my index.html file.Still I am not getting model dialog. I am getting an error which i am getting.
My error is like:
Can anyone suggest me how to do resolve this error.
This is an example for bootstrap modal. I think the way you are trying to do where you are not using bootstrap classes
There are quite a few issues in your code, so better try the sample and develop as you need
<button data-toggle="modal" data-target="#test">CLick</button>
<div class="modal fade" id="test" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Refer below.. This will help you.
var app = angular.module("MyApp", ["ui.bootstrap"]);
app.controller("bodyController", function($scope,$uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
template: `<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>`,
size: 'sm',
controller:'modalCtrl',
resolve: {
items: function () {
// return $ctrl.items;
}
}
});
modalInstance.result
.then(function (result) {
console.log('okay');
},
function (result) {
console.log('cancel');
});
};
});
app.controller('modalCtrl', function($scope,$uibModalInstance){
$scope.ok = function() {
$uibModalInstance.close();
};
$scope.cancel = function() {
$uibModalInstance.dismiss();
};
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<body ng-app="MyApp">
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button style="margin:20px" class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
I have to write a popup with input text field to be filled inorder to edit the username.When I click the edit button,a popup should be appear with input text field to enter data.The username has to be modified to data whatever I have entered in the input field.How can I implement this by using bootstrap popups in angularjs?
It is quite straightforward to create a popup using angular bootstrap.
Read the documentation. Angular Bootstrap Modal Directive
Below is a simple implementation.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.enteredUser = {};
$scope.enteredUser.name = 'not yet entered';
$scope.enteredUser.address = 'not yet entered';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (user) {
//$ctrl.selected = selectedItem;
$scope.enteredUser = user;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope, $uibModalInstance){
$scope.ok = function(){
$uibModalInstance.close($scope.user);
};
$scope.cancel = function(){
$uibModalInstance.dismiss('cancel');
}
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="col-sm-12">
<br>
<button class="btn" ng-click="OpenModal()">Enter User Details</button>
<br><br>
<ul class="list-group">
<li class="list-group-item active">User Details</li>
<li class="list-group-item">Name: {{enteredUser.name}}</li>
<li class="list-group-item">Address: {{enteredUser.address}}</li>
</ul>
</div>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" id="formGroupExampleInput" ng-model="user.name" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Address</label>
<input type="text" class="form-control" id="formGroupExampleInput2" ng-model="user.address" placeholder="Another input">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
</body>
</html>
I am trying to create a simple chat room web app. I am trying to bootstrap a modal to angular to include a create new room button. I followed the documentation and followed the sample code but when I tried to run it, the modal would not open. What am I missing? Here is the template and controller.
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
})
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
Try
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$scope.open=function(){
angular.element('#myModal').modal('show');
};
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div id="myModal" class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="open()">New Room</button>
$uibModal dependency needs to be injected into ModalCtrl controller, like this:
angular
.module('blocChat')
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
where
function ModalCtrl($uibModal, Room) {
//...
}
Example
(function () {
function ModalCtrl($uibModal, Room) {
var $modal = this;
//this.newRoom = Room.addRoom();
$modal.open = function () {
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
});
};
}
angular
.module('blocChat', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.factory('Room', function () {
return {
addRoom: function () {
console.log('add room');
}
};
})
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="blocChat" ng-controller="ModalCtrl as $modal">
<script type="text/ng-template" id="app/templates/modal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</script>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
</div>
I'm working on an app that uses AngularJS and Bootstrap. I am trying to show and hide a dialog from my controller using Bootstrap UI. For some reason, when I try to open the dialog, I just see a blackened screen. However, the dialog never appears.
My Plunker is here
In that plunker, you can see that I have:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
Which looks correct to me. Why is only a black screen appearing? Thank you!
The Bootstrap UI directive just needs the content of your modal as template.
You can simply remove the wrapping tags and it will show as expected:
<div id="scoopModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">...</div></div></div>
var app = angular.module('app', ['ui.bootstrap']);
app.service('myService', ['$http', '$q', function($http, $q) {
this.getOptions = function(prefix) {
return $http.get('http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=60629').then(function(response){
console.log(response.data.results);
return response.data.results;
});
};
}]);
app.controller('MyController', ['$scope', '$modal', function ($scope, $modal) {
$scope.query = 'test';
$scope.newItem_Click = function() {
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm'
});
modalInstance.result.then(
function (res) {
console.log('here');
},
function (err) {
$log.info('Modal dismissed at: ' + new Date());
}
);
};
$scope.saveItem = function() {
console.log($scope.newItem);
alert('Need to close dialog here.');
};
}]);
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap#3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="MyController">
<h1>Hello Plunker!</h1>
<button class="btn btn-info" data-toggle="modal" ng-click="newItem_Click()">new item</button>
<script type="text/ng-template" id="item-dialog.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">New Scoop</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="type">Type</label>
<select id="type" class="form-control" ng-model="newItem.typeId">
<option value="-1">Other</option>
<option value="1">Product</option>
<option value="2">Service</option>
</select>
</div>
<div class="form-group">
<label>Text</label>
<textarea class="form-control" rows="3" ng-model="newItem.data"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="saveItem()">Save Scoop</button>
</div>
</script>
</body>
</html>
For closing the modal you can simply add a controller like this:
var modalInstance = $modal.open({
templateUrl: 'item-dialog.html',
size: 'sm',
controller:function($scope, $modalInstance){
$scope.saveItem=function(){
$modalInstance.close();
};
}
});