I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
Related
Hi I am unable to create a modal in AngularJS, also, I don't know where to start regarding modal creation implementation in angularJS. Please share your suggestions or any tutorials on how to create a modal in AngularJS. Thank you!
This is something you could do yourself. However, there are plenty of libraries that already do this.
https://pathgather.github.io/popeye/
If you want to pursue yourself then checkout Ben's article on the topic.
http://www.bennadel.com/blog/2806-creating-a-simple-modal-system-in-angularjs.htm
If you want to create an custom modal or dialog box you first need to create a directive and need to control the behaviour of the popup based on an event add a handler that will open the dialog box such as
//Keep this event at the top of your hierarchy.
$scope.$on('OPEN_DIALOG_BOX',function(event,data){
event.stopPropagation();//stops the event from bubbling up the event chain.
//add a variable that will show or hide the modal dialog box.
$scope.hideDialog = true;
//use data to pass custom message to bind in your html.
$scope.message = data.message;
});
//Call this event
$scope.$emit('OPEN_DIALOG_BOX');
or
You can use angular material dialog box.
Or
Use ng-dialog as explained in this blog
FIDDLE FOR THE CODE SNIPPET
I hope this helps.
i have a small problem with Angular JS and modal bootstrap.
This is the scenery:
I create a modal with bootstrap which contain a form. In this form i use angular validation with the built-in property formname.$valid.
When formname.$valid is false i set a submit-button to Hidden, when formname.$valid is true the same button is visible.
The problem is when i submit the first time the form closing the modal and clear all the input type. The second time i open the modal the property formname.$valid is true, instead it has to bee false.
Also the class of the form is set to ng-valid, however it has to be ng-invalid.
How can i resolve this problem?
This is a jsfiddle demonstration which explains exactly my issue.
For the js fiddle project i reccomend you to use Chrome, because is the only browser i need to support (it's only a school project)
Thanks to all!
(sorry for my bad english)
You need to visit documentation for ui-bootstrap
Documentation ui-bootstrap
You include ui-bootstrap in your module and you don't use it for manage your modal
Look at this plunker for use $modal:
Example modal angularjs
I want to bind body click event to custom directive. I have created a custom directive for drop down. My functionality is I want closed the option list when the user clicks on the body. The html code for drop down is created by using <ul> and <li> tag. I have used the directive several times on the page. but the page now became slow as the no. of usage of directive increased on the page. So i want to know how to dynamically bind and unbind body click event inside the directive. i used $document.bind('click',function(){//function body}); syntax to bind click event. Please help. Thanks in advance
Instead of using JQuery, you can use the link method to manipulate DOM elements and add listeners
See : the AngularJS doc
I hope it may help
I am adding a few buttons dynamically by injecting html using jquery. I want to be able to use ng-click on those elements but I do not know how to attach an angular click listener on it.
To attach a click listener on a button simply add ng-click="someMethod()" to the button:
<button ng-click="someMethod()">Button text</button>
you will need have to have a scope-method called someMethod().
for reference see the angular docs and note that the expression can be replaced by a method.
I'm using angular-ui bootstrap to show modal windows. I'd like to turn this into a directive that would let me pull content from the server and display it in a modal or popover…
For example: <a a-infobox="modal" href="#/content/one">A link</a> should get the content from the href and pull it into a modal window.
I pulled together a plunkr: http://plnkr.co/edit/cwtTHjMsW0knlsq2NNtg?p=preview. The first link has the a-infobox attribute. When I click on it no dialog shows up. In the console you can see that it was called.
When I click on the second link which is called from a controller, it opens the second dialog. Then when I click the button on that modal, it disappears and the dialog from the first click is right behind it.
I'm just starting to dig into directives and am sure I'm missing something fundamental.
Thanks in advance.
I found a solution...it appears that the modal needs to be applied so angular will process it on the next digest.
A simple line: scope.$apply($rootScope.dlg); is all it took.
The plunker was updated accordingly.