angular js使用指令的正确方式

Question

我是Angularjs的新手，需要一些帮助。

我想要实现的是一个内联可编辑文本
这将在文本和输入框之间切换
因此，onClick文本将切换为一个输入框，使其聚焦
当出现模糊时，它将切换回输入框的值文本

如果我一起破解它，我可能会让它发挥作用，但
我想用的角度

因此，感谢您提前提供的帮助
这就是我目前拥有的

    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

这里有一个plunker来展示我将如何做到这一点：

你只需要一个指令就可以处理这个问题。通过使用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>