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

来源：互联网发布：金百福软件打不开编辑：程序博客网时间：2024/06/18 15:48

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

阅读全文

0 0