угловой 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

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

Вам нужна только одна директива для решения этой проблемы. Используя 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>