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
Related
There is a modal box that is opened from the page multiple times. The tinyMCE control is initiated on the first popup but on subsequent popups, the textarea is not transformed.
I tried using a timer as suggested here stackoverflow/17825282 but got the same result.
Code on Plunker
From docs: https://github.com/angular-ui/ui-tinymce
Be sure not to set an id attribute.)
So just remove id:
<textarea ui-tinymce="" ng-model="tinymceModel">{{SectionTemplate.Preface}}</textarea>
http://plnkr.co/edit/Mv2fLWuKiVjEIy77XNF0?p=preview
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
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.
I am trying to get a ng-click event to fire correctly when integrating the Angular Kendo UI.
The following Plunker shows a working example, click the button click me and a modal window appears, however if I add the kendo-grid attribute to line 18 of index.html then the pop up does not work. e.g. changing:-
<table>
to:
<table kendo-grid>
Then the modal popup does not work. I suspect that when the grid is rendered then angular loses the binding. Not sure how to fix it. Can anyone help?
The problem is the angularjs-kendo labs master file does not support command binding and a couple of issues have been raised.
Basically you need to take the javascript from the compile-kendo-grid-rows
See working plunker.
I have a directive that creates and manages a bootstrap modal dialog.
Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.
This seems kinda messy. Is there a better way?
The directive in action:
<modal trigger="shouldDisplayModal" title="{{modalTitle}}"
message="{{modalMessage}}" positiveclick="okClicked()"
negativeclick="closed()"
positivelabel="Ok" negativelabel="Cancel"/>
The watch in the controller of the directive:
// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){
if (newValue)
{
// enable any disabled buttons
modalElem.find('button').removeClass('disabled');
// show the dialog
modalElem.modal('show');
}
else
{
// hide the dialog
modalElem.modal('hide');
}
});
Here is a working example: http://jsfiddle.net/rabidgremlin/Ya96z/31/
UPDATE: Here is a fixed up example that corrects some issues with multiple directives on a page: http://jsfiddle.net/rabidgremlin/sjbCJ/1/
I was going to suggest using ng-show inside your directive's template (this what the dialog component on the directive page does, along with a visible attribute that is just like your trigger attribute), but then I saw that you also need to enable some buttons before modifying the visibility.
So, I think what you have is fine, and I don't see it as messy. Either your directive has to $watch for something, or you could create the dialog when an event happens -- this seems to be what the $dialog service does that #pkozlowski mentioned in the comments. The latter would not need a trigger attribute.
I blogged about working with angular and bootstrap modals just a couple weeks ago.
My solution involves a service, all of the hide/show magic for the modal is handled by bootstrap's javascript, and angular just worries about the data.
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely