I saw examples about alerts here http://angular-ui.github.io/bootstrap/ , nevertheless in that example alerts are just added into the current window.
I'd like to show a popup, so I'm using the $modal service..anyway as you can see from my plunker
`http://plnkr.co/edit/Tz4SEvKft4EQoSDlZA2M`
some extra space shows up. How to remove it? And is this the only way to actually show an alert in angular ui?
Related
I'm using angular x-editable in my project for an editable popover. I've successfully made changes to the look of my confirmation button to an .svg I wanted to use and removed the Cancel button doing:
app.run(function(editableOptions, editableThemes) {
editableOptions.theme = 'default';
editableThemes[default].cancelTpl = '';
editableThemes[default].submitTpl = '<img class="popoverSubmitBtn"
src="images/confirmationBtn.svg" ng-click="$form.$submit()">';
});
However I am having issues when trying to change editableThemes[default].inputTpl. It seems like changes to inputTpl are not being registered for some reason. What I would like is for the input box that shows in the popover to have a circular 'x' button to clear the current input WITHIN the input text field.
This was actually default behavior in the original x-editable (see here at Twitter typeahead.js demo). While there is an equivalent to use editableOptions.displayClearButton=true, this creates an entire button next to the input box, much like the confirmation button, which is not what I want.
My plan was to use a directive here that provides the 'clear' button and use editableThemes[default].inputTpl = '<input type="text" reset-directive>'; but again, seems like its broken. Even this open issue here leads me to believe it was never working as intended.
Has anyone had any luck with this or knows of any workarounds that may help in my situation?
ALSO- a bit unrelated but on the topic of styling, how do I move the position of where the popover shows up? Currently it's smack-dab in the middle of where my cursor is when I click the text to activate popover, but I would like it a bit higher and to the right.
Got it working. For those with similar issues:
Styling for the popover can be controlled through xeditable.css found in the bower_components directory after installation
While inputTpl isn't functioning the way I expected, I added the
custom directive to the input field using e-* (i.e. e-my-directive) with no issues.
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'm trying to get the angular-slider (http://prajwalkman.github.io/angular-slider/) to work on a angularjs twitter bootstrap model dialogue. It works fine on the page, but I cant get it to work on the modal window. Any thoughts? I'm just learing angularjs...
Here is my code:
http://plnkr.co/edit/gBbReA65qoXsXsC0H3Ft?p=preview
Thanks, Ryan
Looks like that's a known bug. It's logged here: https://github.com/prajwalkman/angular-slider/issues/36
If you don't want to wait on them fixing it (looks like their last commit was 4 months ago...) you can look at the slider provided by angular-ui: https://github.com/angular-ui/ui-slider
Or here's an example of writing your own: http://ngokevin.com/blog/angularslider/
I created a new slider that allows for multiple sliders and has the capability to be used in a modal window.
https://github.com/enkodellc/angular-multi-slider
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.