How to trigger directive on event?

[Amitava Saha]

I'm trying to make an in-place editor directive. I've seen few directive examples and all of them using hidden input elements to switch edit/view mode. I don't want to clutter my DOM with lots of hidden elements (considering if I have lots of table rows I want to edit in place). So I was thinking if I can have a directive which renders input elements when I double click on something I want to edit and when I cancel edit mode, it should be removed.

What I'm assuming I should do is: In my directive linker I should have a method that renders my input elements for in-place editing and I should be calling this method in my click handler.

<span ng-click="editInPlace()">Edit me</span>

controller:

...
$scope.editInPlace = function(){
    this.renderEditor();
}

Directive

...
        link: function (scope, elem, attrs) {
            scope.renderEditor= function () {
                //code to show inputs
            }
        }

 Is this direction correct? Or there are better approaches?

Thanks!

Amit

[Joshua Miller]

Hello!

Yes, your approach will work in general, but your implementation looks a little frail. You'll also have to be sure to compile the template that gets inserted. Check out the Tooltip directive of ui-bootstrap for some pointers on how to handle dynamic insertion of DOM elements in a directive: https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js.

Feel free to post a Plunker after you take a stab - I'd be interested to see what you come up with. :-)

Josh

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
 
 

[Amitava Saha]

Thanks Josh for the direction! I'm trying to get my head wrapped around Directives (I guess that's where all angular fun is). I'll post my Plunker as soon as I'm done.  There goes my whole Sunday (and it's gonna be fun too).  

Amit

[Amitava Saha]

OK here is what I've got so far. http://plnkr.co/edit/U5WiZzhX31ifux33enYh

It works as expected first time but subsequent times Save or Cancel buttons does not work. Why is that?

Amit

[ganaraj p r]

@Amitava :

Have you looked at john lindquist's custom components tutorial? If you look at his markdown tutorial ( which does exactly what you are looking for, I think! ) you should find a pretty good example...

http://www.youtube.com/watch?v=A6wq16Ow5Ec

and

http://www.youtube.com/watch?v=nKJDHnXaKTY

--
Regards,
Ganaraj P R