AngularJS实现一个HTML元素内容可编辑指令

有时我们想让用户可编辑元素某个属性内容，比如自定义数据名称，所以在此实现一个简易的指令my-editable

先看效果吧：

指令代码：

.directive('myEditable',function ($timeout) {
    return {
        restrict: 'A',require: '?ngModel',templateUrl: "./t.html",transclude: true,link: function (scope,element,attrs,ngModel) {
            if (!ngModel) {
                return;
            }
            scope.isEdit = false;
            //获取内部输入框的controller
            var tempInputCtrl = element.find("input").controller("ngModel");
            tempInputCtrl.$parsers.push(function (value) {
                //做输入验证，此处以不超过10位为例
                var return_value = value;
                if (value.length > 10) {
                    console.log("over 10");
                    return_value = value.slice(0,10);

                }
                tempInputCtrl.$setViewValue(return_value);
                tempInputCtrl.$render();
                return return_value;
            });

            scope.edit = function () {
                scope.isEdit = true;
                scope.tempText = ngModel.$modelValue;
                // 输入框获取焦点
                $timeout(function () {
                    element.find("input")[0].focus();
                })

            }
            scope.save = function () {
                var html = scope.tempText;
                ngModel.$setViewValue(html);
                scope.isEdit = false;
            }
            scope.cancel = function () {
                scope.isEdit = false;
            }

            ngModel.$render = function () {
                scope.tempText = ngModel.$viewValue;
            };


            element.find("input").on("blur",function () {
                console.log("input blur");
                scope.isEdit = false;
                scope.$apply();
            })

        }
    };
})

t.html指令模板代码：

<div>
    <ng-transclude ng-show="!isEdit"></ng-transclude>
    <input type="text" ng-model="tempText" ng-show="isEdit">
    <button ng-click="edit()" ng-show="!isEdit">Edit</button>
    <button ng-mousedown="save()" ng-show="isEdit">Save</button>
    <button ng-mousedown="cancel()" ng-show="isEdit">Cancel</button>
</div>

HTML代码：

<body ng-controller="ctrl"> <div ng-model="data" my-editable> {{data}} </div> <!--显示实际Model值用--> <p> {{data}} </p> </body>

当然这个指令存在局限性，比如可以外部获取正则内部做验证用。

还可以看这个指令：https://github.com/vitalets/angular-xeditable

AngularJS实现一个HTML元素内容可编辑指令

相关文章