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>

angular js使用指令正确的方法

1 个答案: