Dynamic switching between bound views in AngularJS

Question

I am quite new to AngularJS and I am currently trying to figure out how to best approach this functionality:

I am looking for a way where I have something along the lines of <span editable>I am a text</span>, and when the user clicks on it, it becomes editable (eg. <input type="text">) until the element loses focus, at which point it should flip back to its original <span editable>...</span> with the new value. Furthermore, this is likely not static text but bound to a model.

I am thinking this should be doable with directives, but I've hit a road block along the line as to how such a directive would actually work.

app.directive('editable', function() {
    return function(scope, element, attrs) {
        element.bind('click', function () {
            // something.
        });
    }
})

Can anyone provide me with guidance or a solution to this?

Thanks in advance,
- Manny

This may help chandermani.blogspot.in/2012/12/angularjs-and-inplace-edit.html — Chandermani
– Chandermani, Commented Feb 20, 2014 at 12:40
You are a gentleman and a scholar, Chandermani. This seems to cover what I was looking for. If you add it as an answer below, I can mark it as a solution, so you get the credit, fame and glory :) — Manny
– Manny, Commented Feb 20, 2014 at 12:56

Chandermani · Accepted Answer · 2014-02-20 13:48:59Z

1

How i did this was to create a directive that could be applied to any html element. It hides the standard element and shows a text field when you click in it. Then it changes it back to the origninal element when you move away from the field.

More details here

and here is the companion fiddle

http://jsfiddle.net/cmyworld/6gMXL/

You can use it like

    <h1>
      <editable model="heading" on-delete="" defaultval="Default val">
    </h1>

answered Feb 20, 2014 at 13:48

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic switching between bound views in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related