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>
Related
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 am need of showing two different bootstrap modal pop-up's when we check and uncheck the checkbox like if i check the checkbox i need to display first modal pop-up and when i un check the same checkbox then i need to display second modal pop-up.
Here is my sample html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>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>
<script type="text/ng-template" id="myModalContent2.html">
<div class="modal-header">
<h3>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>
<input type="checkbox" class="btn" ng-click="open()">
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
here is my sample controller :
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var 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');
};
};
I am new to angular js little bit confused with the controllers.
I guess you just have to add a few conditions that change your open() function behaviours depending on checkbox value :
Just add a model to your checkbox so you can know its value
<input type="checkbox" class="btn" ng-model="checkbox" ng-click="open()">
And now you can add a conditions depending on checkbox value
$scope.open = function() {
if ($scope.checkbox == true) {/* open modal 1 */}
else {/* open modal 2 */}
}
I have defined a bootstrap 3 modal in my code:
<script type="text/ng-template" id="modalTmpl">
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button ng-click="close()" type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</script>
<div ng-controller="ModalDemoCtrl">
<modal></modal>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
This is my angular code:
app.directive('modal', function($log) {
return {
restrict: 'E',
templateUrl: 'modalTmpl',
link: function(scope, element, attrs) {
self.element = element;
scope.close = function() {
$log.info('close!');
var modal = self.element.find('.modal');
//debugger;
modal.removeClass('show');
}
},
controller: function($scope, $attrs) {
}
};
var ModalDemoCtrl = function ($scope, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
};
};
When I click on open me it does not show the modal: ( Could it be the wrong bootstrap.css reference or something else?
plunkr :http://plnkr.co/edit/RhaUdB?p=preview
Why not try this by assigning modalTmpl id to your model
<button class="btn" ng-click="open()" data-toggle="modal" data-target="#modalTmpl">Open me!</button>
Try this in your modal template:
<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">
Then in the controller:
$scope.isProductShowing = false;
$scope.currentFullProduct = null;
$scope.productModalOptions = {
backdropFade: true,
dialogFade:true
};
$scope.showFullProduct = function (productId) {
$scope.isProductShowing = true;
$scope.currentFullProduct = _.findWhere($scope.products, { id: productId });
}
Then you have to trigger the showFullProduct function from the main template:
<li ng-click="showFullProduct(product.productId)">
There is a lot of issues with this code.
First, your ModalDemoCtrl is not defined. Second, your open function is not defined. I move the button the MainCtrl to show how it can works. And declare open function to set the show to true which will be used in ng-show directive
http://plnkr.co/edit/uP3xB7?p=preview
<div type="text/ng-template" ng-show="show" id="modalTmpl">
<!-- Modal box -->
</div>
$scope.open = function() {
$scope.show = true;
};
Have problem sending data to modal with resolve.
I have this template:
<div class="split wrapper" ng-app="myApp" ng-controller="appCtr">
<script type="text/ng-template" id="tablesModal">
<div class="modal-header modal-header-primary">
<h4 class="modal-title">{{ test }}</h4>
</div>
<div class="modal-body tables-list">
<ul>
</ul>
</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>
</div>
controller:
var app = angular.module('myApp.controllers', ['ui.bootstrap']);
app.controller('appCtr', ['$scope', '$modal', function($scope, $modal) {
$scope.openCT = function(size){
var modalInstance = $modal.open({
templateUrl: 'tablesModal',
controller : 'appCtr',
size: size,
resolve: {
test: function(){
return 'example';
}
}
});
}
}]);
but i nothing shows in modal title..
What am i doing wrong here?
resolve() function is called when dialog is closed and modal data is passed then() handler.
To fix issue add test in scope:
$scope.test = "Modal Title";
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();
};
}
});