Skip to main content

Angularjs and inplace edit

AngularJS is an awesome framework and Angular Directives make this framework super awesome :)

AngularJS  directives help us extend the existing HTML DSL. You can create new tags, extend functionality using existing tag and create reusable component.
I recently created a Inplace editable control in AngularJS. It basically allows to do in place editing for elements like H1, H2, H3 div etc, basically all read only control. I took the initial idea from this fiddle and added
  • Text selection on edit.
  • Cursor positioning
  • Handle the Enter key press.
Here is my fiddle
Labels:
Location: Hyderabad, Andhra Pradesh, India

Comments

GFoley83 said…
Hey your JSFiddle is broken for a couple of reasons:
1. Your reference to AngularUI is broken now (just remove the "." after "raw" from "http://raw.github..." and it will work.
2. You are referencing a template that doesn't exist "template: $('#editable-template')[0].innerHTML,"
3. That reference above is using jQuery, which you haven't included.

For AngularJS I find it handier to add the script references in the style box; like the official AngularJS examples do. Or just use Plunker instead!

I'd be interested in seeing a working solution of your directive.
2:45 AM
chandermani said…
Hey thanks for pointing out :) I am not sure why did it happened, and i am even not sure what i did. But I tried to fix it and bring in some new elements.
12:50 PM
GFoley83 said…
Cool thanks! I've updated it a bit as an exercise; there's no need to use jQuery for this directive really; if you move the template inside of your app, you can reference its id with "templateUrl" in your directive's return function. Also without jQuery we can't select all the text on edit but we can still give focus to the text box.

See example here:

http://jsfiddle.net/gavinfoley/DJKmW/
2:48 PM
chandermani said…
Yes looks much better :) Did not know i can just use the template id directly
1:47 PM
Post a Comment

Popular posts from this blog

IIS Url Rewrite and HTTP POST data

If you play around with IIS Url Rewriting rules and try to do redirects on an HTTP POST you loose your POST data. To make sure you get the post data you have to set the `redirectType` to `Temporary` within your rules. So the action configuration looks like this <action redirectType=" Temporary " type="Redirect" url="http://{HTTP_HOST}{REQUEST_URI}"> </action> You may think what scenario warrant a POST request redirect. We faced one such scenario while doing SSO with a federated Identity Provider (IP)  such as Google, Azure AD. In federated authentication scenario once the user is authenticated by the IP, it redirects back to your site with claim tokens in a POST request over secure channel (https). In our case we wanted to redirect to user back http after receiving the request. But any redirects were causing loss of token. By doing a 307 (Temporary) redirect we were able to preserve the post data.
1 comment
Read more

Caching Images downloaded from web on Windows Phone Isolated storage

I was helping on a Windows Phone application where the requirement was to cache the images the phone downloads on the isolated storage for offline viewing. I wanted a solution which was simple and as transparent as possible. While researching I found  someone wrote a Silverlight converter for loading images from isolated storage. Taking that as a base I created a converted which can Load image from web (http + https), and persist it to isolated storage. In case of network connectivity issues can load the same image from isolated storage. It does that by mapping the http url to a isolated storage location. In case the network is down and the image is neither there in cache, loads a default image, passed as parameter to converter. Here is the gist for the implementation. To use the converter Import the name space. Declare the converter as resource. Set the Image Source Property to use this converter like this 
7 comments
Read more

Integrating ASP.Net MVC with AngularJS

We recently released a Project Template for ASP.Net MVC and AngularJS here and here . I did a follow up post detailing how the project template has been setup and how to make AngularJS and MVC play well together on my company blog . If you are interested in understanding how the template works head over to my blog post and read it!
4 comments
Read more