Угловой JS, используя директивы правильный путь

Question

Я новичок в Angularjs, и мне нужна помощь.

Чего я хочу добиться, так это встроенного редактируемого текста
Это будет переключаться между текстом и полем ввода
Так что текст onClick будет переключаться с поля ввода, чтобы придать ему фокус
и когда есть размытие, он переключится обратно на текст значений в поле ввода

Если бы я взломал это вместе, я мог бы заставить это работать, но
Я хочу сделать это способом angularjs

Так что спасибо за любую помощь заранее
Это то, что я до сих пор

    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);
                        });
                    }
                };
            }
        );

а вот и HTML

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

а вот и приложение

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

еще раз спасибо:)

Answer 1

Вот плункер, чтобы показать, как я это сделаю:

Вам нужна только одна директива для решения этой проблемы. С помощью директивы angular ng-show вы можете скрыть текстовое поле или метку; так что вам не нужно никаких манипуляций с DOM в вашей директиве. И, добавив аргумент в вашу директиву, вы сделаете ее доступной для всех.

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;
                    }
                }
            };
        }
    );

Вот шаблон HTML, который используется в директиве:

<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>

А вот пример использования:

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