Typing delay using angular-ui codemirror - angularjs

I have used angular ui codemirror in textarea for syntax highlighting, line numbers, formatting functionality.
But after integrating ui-codemirror, I am facing typing delay in text area. same delay will occurs if user tries to delete the contents from textarea.
I am using angular.js 1.0.8, codemirror version 4, angular ui codemirror directive.
Does anyone have solution for this?
Thanks,
Jay

Related

Angular material form input box styling not displaying properly

I came accross a form wizard by Afrad on github material-wizard and will like to implement it because of its angular-material properties. The downside is that the text-boxes turn out totally different from the angular styling. Is there a way to fix this? what causes this and how do you go about the fix. I have tried using ngWizard as well and face the same issue. the forms display okay without being encapsulated in the wizard directive.
A link to a plunker showing the demo is on the github page. Attached below is a snapshot of the plunker.

CKEditor conflicting with TextAngular

We have a nifty AngularJS 1 app and we're using TextAngular add on. Works great. We now have the requirement to add the customer's custom header into our work, which is being added via JS AJAX call and it inserts the HTML into the page. This header is using CKEditor. I've asked to remove it but they can't. As a result, when I click into my TextAngular box, the CKEditor toolbar appears.
Thoughts on how I can separate the two? It appears CKEditor is attaching itself to any div where contenteditable="true". Is there a way to tell CKEditor to ignore divs?

Angular-UI bootstrap popover directive component

I developed a directive to maintain inline help for a widget from a dropdown bootstrap menu, but when I click help from the dropdown, the popover is currently bound to the element and cannot be separated, so it opens absolute from that position.
But the requirement would be if we click help in the dropdown we have show popover like below
I am not sure if it even possible, anyways I'll list down the efforts that I made.
Angular-UI Bootstrap does not help, it does not possess any capabilities to programmatically trigger like bootstrap.
However, In Angular-UI Bootstrap we can add triggers which was done by Elijen, but it would be divided into two components.
My issue would be to create a single directive housing both the trigger and the popover like the second image. I don't want to kill the sanity of bootstrap by overiding the CSS. I wanted to know either we could write a method to detect the position and move to the top of the widget or anything like that, since it would be a reusable component.
The reason why it's a single directive is, it would be packed into webpack and made a cross-cutter tool.
The angular-ui-bootstrap popover listens to the popover-is-open attribute to support opening the popover programmatically.

Looking for comparable tooltip capability for AngularJS that cluetip gave me

I've gotten the code from the post Angular-ui tooltip with HTML working but it's capabilities are not near what cluetip gave me. Things like not having automatically aligning based on screen position and other options make it not very useful for me. You can see the capability I'm wanting with Angular when you hover over the details buttons on the page http://www.siliconvalley-codecamp.com/session
Is there anything comparable to cluetip in the angular world? has anyone done an integration with angular and cluetip?
you could mod a popover element from http://angular-ui.github.io/bootstrap/ with css to do the same

AngularJs:How to create a tooltip in angularjs

We are trying to determine what tooltip plugin we should use for web page that uses AngularUI to get an effect like this (or close to this)
the angular-ui popover plugin with some custom html and css would do the job:
http://angular-ui.github.io/bootstrap

Resources