I want to show following modal once user click the text. I don't know why it is not working.
<span ng-model="nonrelevantData" style="cursor: pointer;
text-decoration: underline;"><b>non-relevant data</b></span>
<script type="text/ng-template" id="bs-example-modal-sm">
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</script>
in js
$scope.$watch('nonrelevantData', function () {
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}, true);
You can put your modal code in a scope function and call that function in ng-click
$scope.openModal = function(){
$modal({
template: 'bs-example-modal-sm',
scope:$scope.$new()
});
}
Markup
<div ng-click="openModal()">clik me to open</div>
I modified the plunkr of fancypants (from another question) to make a Simple Modal Example
To listen for clicks you don't need a watcher. The ngClick directive can be used for that.
Related
I want to implement UI Modal in AngularJS without using $Scope and without implementing the ModalController(resolve).
I am not using $scope in my Controller. I am using vm = this. So I dont know what value to assign to scope while openinig the Modal.
I also dont want to use resolve, as it involves creating one more Controller.
Please find my code below: Any help will be greatly appreciated.
HTML
<script type="text/ng-template" id="modaltemplate.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="vm.close()" data-dismiss="modal">Close
</button>
</div>
</script>
CONTROLLER Look at scope in $uibModal.open() function.
angular
.module("app", ["ui.bootstrap"])
.controller("MyController", MyController)
MyController.$inject = ["$uibModal"];
function MyController($uibModal) {
var vm = this;
vm.open = open;
vm.close = close;
function open() {
vm.modalInstance = $uibModal.open({
templateUrl: 'modaltemplate.html',
scope: //what should I assign here, I dont want to use $scope. Or in other words, I want to assign 'vm' here.
});
}
function close() {
//This function is not getting called as it does not understand the vm.
}
}
I have tried the following things:
In the HTML, set ng-controller="MyController as vm".
Also tried setting various Values for scope, controller, and controllerAs in the $uibModal.open() function.
But nothing seems to working. Can anybody please help me out.
if you have problem with Close function, you can set $dismiss() for close modal instance, also you can pass parameter in $dismiss function for further use, try this:
<script type="text/ng-template" id="modaltemplate.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="$dismiss('cancel')" data-dismiss="modal">Close
</button>
</div>
</script>
You can create a new scope in main controller
var modalScope = $scope.$new();
assign what you need on new scope (or whole vm):
modalScope.vm = vm;
and then assign it as modal scope:
vm.modalInstance = $uibModal.open({
templateUrl: 'modaltemplate.html',
scope: modalScope
});
Just make sure you clear it when closing/destroying modal
modalScope.vm = null;
Please run this plunker, if you enter a value in the modal and then click on show value, the value is undefined in $scope, how to get the value?
HTML
<div ng-app="app" ng-controller="myCtl">
<input type="button" ng-click="openModal()" value="Open Modal">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<form name="myForm" novalidate>
Enter a value <input type="text" ng-model="someField" />
</form>
<div class="modal-footer">
<button ng-click="showValue()">Show value</button>
</div>
</script>
</div>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myCtl', function($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
animation: false,
templateUrl: 'myModalContent.html',
scope: $scope
});
};
$scope.showValue = function() {
alert('value entered=' + $scope.someField);
};
});
You are seeing this because the scope of the modal is isolated. Even though you pass the $scope to modal. It still does not use the same $scope.
For your example the following would work.
Update the modal template:
<button ng-click="showValue(someField)">Show value</button>
Update your controller showValue method as follows:
$scope.showValue = function(theValue) {
$scope.someField = theValue;
alert('value entered=' + $scope.someField);
};
Really though the best way to use the modal is to use the modal instance created by the open method to track the close and dismiss events and handle the result that way. Take a look at the example on on the ui-modal section of the ui-bootstrap documentation
I have a countries list and I am populating those using ng-repeat, everything is working fine. Also, I am trying to show some other details inside each country by using the bootstrap popover and it doesn't seem to work so can someone please help me?
Html Code:
<body ng-app="app" ng-controller="my_controller">
<div class="span3 projectCard" ng-repeat="country in all_countries">
<div class="projectCardHeight">
<button class="btn close cardClose" ng-click="deleteCountry(country.id)">×</button>
<div class="cardHeader">Country</div>
<div class="cardBody">{{country.id}}</div>
<div class="cardBody">{{country.title}}</div>
<div class="cardBody">pop</div>
</div>
</div>
</body>
Javascript Code:
var app = angular.module("app", []);
app.controller('my_controller', function($scope) {
$scope.all_countries = [
{"id":28,"title":"Sweden"},
{"id":56,"title":"USA"},
{"id":89,"title":"England"}];
});
function deleteCountry(id)
{
alert("Do something");
}
$(document).ready(function () {
$("a[rel=popover]")
.popover({ placement: 'bottom', html: 'true' })
.click(function (e) {
e.preventDefault();
});
});
Please refer to this JsFiddle
Demo: http://jsfiddle.net/5ww8e/1/
Create a new directive called bs-popover and apply it together with ng-repeat. Trigger popover method inside bs-popover directive.
Also your js file loading order is wrong, you should load jquery before bootstrap.
How do I detect when an Angular UI Bootstrap modal dialog is closed?
I need to know when the dialog closes so I can broadcast a loginCancelled event using the angular-http-auth library to prevent my Angular UI from hanging, especially after closing the modal via clicking on the backdrop.
This works for clicking on the backdrop and pressing the esc key if you are opting in on that.
var modalInstance = $modal.open({
templateUrl: '/app/yourtemplate.html',
controller: ModalInstanceCtrl,
windowClass: 'modal',
keyboard: true,
resolve: {
yourResulst: function () {
return 'foo';
}
}
});
var ModalInstanceCtrl = function ($scope, $modalInstance, yourResulst) {
var constructor = function () {
// init stuff
}
constructor();
$modalInstance.result.then(function () {
// not called... at least for me
}, function () {
// hit's here... clean up or do whatever
});
// VVVV other $scope functions and so on...
};
UPDATE: alternative approach
I have no idea why this way is not documented at http://angular-ui.github.io/bootstrap/ ... but I find it much better. You can now use that page's controller or use a specific controller with the controller as syntax. You could even utilize ng-include for the content of the modal, if you want separation on html. The following works with no JS needed in the controller to setup/configure the modal, as long as you have bootstrap/bootstrapUI included in your project/site
<div class="row">
<button class="btn btn-default" data-toggle="modal" data-target="#exampleModal">Open Example Modal</button>
</div>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">Close</button>
<h2 class="modal-title" id="exampleModalLabel">Modal Example</h2>
</div>
<div class="modal-body" style="padding-bottom:0px;">
<h3>model markup goes here</h3>
</div>
</div>
</div>
</div>
I finished with the following code:
$modal.open(modalOptions).result.finally(function(){
console.log('modal has closed');
});
This way you can avoid the method then()
This worked for me:
var modalInstance = $modal.open({...});
modalInstance.result.then(function () {
//something to do on close
});
Using the example mentioned here, how can I invoke the modal window using JavaScript instead of clicking a button?
I am new to AngularJS and tried searching the documentation here and here without luck.
Thanks
OK, so first of all the http://angular-ui.github.io/bootstrap/ has a <modal> directive and the $dialog service and both of those can be used to open modal windows.
The difference is that with the <modal> directive content of a modal is embedded in a hosting template (one that triggers modal window opening). The $dialog service is far more flexible and allow you to load modal's content from a separate file as well as trigger modal windows from any place in AngularJS code (this being a controller, a service or another directive).
Not sure what you mean exactly by "using JavaScript code" but assuming that you mean any place in AngularJS code the $dialog service is probably a way to go.
It is very easy to use and in its simplest form you could just write:
$dialog.dialog({}).open('modalContent.html');
To illustrate that it can be really triggered by any JavaScript code here is a version that triggers modal with a timer, 3 seconds after a controller was instantiated:
function DialogDemoCtrl($scope, $timeout, $dialog){
$timeout(function(){
$dialog.dialog({}).open('modalContent.html');
}, 3000);
}
This can be seen in action in this plunk: http://plnkr.co/edit/u9HHaRlHnko492WDtmRU?p=preview
Finally, here is the full reference documentation to the $dialog service described here:
https://github.com/angular-ui/bootstrap/blob/master/src/dialog/README.md
To make angular ui $modal work with bootstrap 3 you need to overwrite the styles
.modal {
display: block;
}
.modal-body:before,
.modal-body:after {
display: table;
content: " ";
}
.modal-header:before,
.modal-header:after {
display: table;
content: " ";
}
(The last ones are necessary if you use custom directives) and encapsulate the html with
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</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 -->
Open modal windows with passing data to dialog
In case if someone interests to pass data to dialog:
app.controller('ModalCtrl', function($scope, $modal) {
$scope.name = 'theNameHasBeenPassed';
$scope.showModal = function() {
$scope.opts = {
backdrop: true,
backdropClick: true,
dialogFade: false,
keyboard: true,
templateUrl : 'modalContent.html',
controller : ModalInstanceCtrl,
resolve: {} // empty storage
};
$scope.opts.resolve.item = function() {
return angular.copy(
{name: $scope.name}
); // pass name to resolve storage
}
var modalInstance = $modal.open($scope.opts);
modalInstance.result.then(function(){
//on ok button press
},function(){
//on cancel button press
console.log("Modal Closed");
});
};
})
var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
$scope.item = item;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
Demo Plunker
The AngularJS Bootstrap website hasn't been updated with the latest documentation. About 3 months ago pkozlowski-opensource authored a change to separate out $modal from $dialog commit is below:
https://github.com/angular-ui/bootstrap/commit/d7a48523e437b0a94615350a59be1588dbdd86bd
In that commit he added new documentation for $modal, which can be found below:
https://github.com/angular-ui/bootstrap/blob/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal/docs/readme.md.
Hope this helps!
Quick and Dirty Way!
It's not a good way, but for me it seems the most simplest.
Add an anchor tag which contains the modal data-target and data-toggle, have an id associated with it. (Can be added mostly anywhere in the html view)
Now,
Inside the angular controller, from where you want to trigger the modal just use
angular.element('#myModalShower').trigger('click');
This will mimic a click to the button based on the angular code and the modal will appear.
Different version similar to the one offered by Maxim Shoustin
I liked the answer but the part that bothered me was the use of <script id="..."> as a container for the modal's template.
I wanted to place the modal's template in a hidden <div> and bind the inner html with a scope variable called modal_html_template
mainly because i think it more correct (and more comfortable to process in WebStorm/PyCharm) to place the template's html inside a <div> instead of <script id="...">
this variable will be used when calling $modal({... 'template': $scope.modal_html_template, ...})
in order to bind the inner html, i created inner-html-bind which is a simple directive
check out the example plunker
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind inner-html="modal_html_template" class="hidden">
<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>
</div>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
inner-html-bind directive:
app.directive('innerHtmlBind', function() {
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
scope.inner_html = element.html();
}
}
});