angular js using directives the correct way

Question

I am new to Angularjs and I need some help.

What I want to achieve is an inline editable text
That will switch between text and an input box
So onClick text will switch out with an input box give it focus
and when there is a blur it will switch back to the values text of the input box

If I hack it together I could probably get it to work but
I want to do it the angularjs way

So thanks for any help in advance
This is what I have so far

    var textToInput = angular.module('textToInput',[]);

        textToInput.directive(
            'textToInputBox',
            function () {
                return {
                   // template : '<input type="text" >{{ Value }}</input>',
                   // replace : false,
                    link : function (scope, element, attr) {
                        element.bind('click', function ()
                        {
                            $(this).parent().html('<input type="text" value="'+element[0].innerHTML+'" input-box-to-text />');
                            scope.$apply(function(){
                                return  
                            })
                            //alert(element[0].innerHTML);
                            //alert(attr.bob);
                        });
                    }
                };
            }
        );

        textToInput.directive(
            'inputBoxToText',
            function () {
                return {
                   // template : '<input type="text" >{{ Value }}</input>',
                   // replace : false,
                    link : function (scope, element, attr) {
                        element.bind('blur', function ()
                        {
//                          $(this).html('<div text-to-input-box>'+element[0].value+'</div>');
//                          scope.$apply(function(){
//                              return  
//                          })
                            alert(element[0].innerHTML);
                        });
                    }
                };
            }
        );

and here is the HTML

<div text-to-input-box> hello world </div>

and here is the app

var app = angular.module('app', [
    'textToInput'
])

once again thanks :)

Answer 1

Here is a plunker to show how I would do it:

You only need one directive to handle this issue. By using ng-show directive of angular you can hide text box or label; so you don't need any DOM manipulation in your directive. And by adding an argument to your directive, you make it usable by everyone.

http://plnkr.co/edit/SD4gr9RMJYn3fABqCyfP?p=preview

var myApp = angular.module('myApp',[]);

    myApp.directive(
        'textToInputBox',
        function () {
            return {
               templateUrl: "text-to-input-template.html",
                link : function (scope, element, attr) {
                    scope.showInputText = false;
                    scope.toggleInputText = function(){
                      scope.showInputText = !scope.showInputText;
                    }
                }
            };
        }
    );

Here is the template html that is used in the directive:

<span ng-show="!showInputText" ng-click="toggleInputText()"><span ng-show="!value">Click here to write</span> {{value}}</span>
<input type="text" ng-show="showInputText" ng-blur="toggleInputText()" ng-model="value"></input>

And here is a sample usage:

<text-to-input-box value="myValue"></text-to-input-box>