Question

我为textarea创建了一个指令，允许编辑数据操作。在一个表单中有多个textarea作为相同的指令。当我触发任何事件时，它会遍历所有具有assign指令的元素。

例如，有10个textarea字段并且有指令＆＃34; HzAutosave＆＃34;。然后，当我触发单击特定textarea时，它返回特定textarea的值，但它会触发socket io事件，以便将数据发送到服务器10次，无论单个字段中是否只有更改。

指令

    .directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) {
    var currentElement = null;
    return {
        restrict: "E",
        replace: true,
        require: "ngModel",
        scope: {},
        template: "<textarea></textarea>",
        compile: function (scope, element) {
            return {
                pre: function (scope, element, attrs) {
                    element.on("click", function (e) {
                        e.preventDefault();
                        currentElement = attrs.id;
                        console.log("focused element:" + currentElement);
                        angular.element(".autosave").removeClass("active-element");
                        element.addClass("active-element");
                    });
                },
                post: function (scope, element, attrs) {
                    var currentVal = null, previousVal = null;
                    $interval(function () {
                        currentVal = angular.element(".active-element").val();
                        if (null !== currentVal && undefined !== currentVal && "" !== currentVal) {
                            console.log("value::" + angular.element(".active-element").val());
                            if (previousVal !== currentVal) {
                                console.log("save data to console");
                                previousVal = currentVal;
                                var socket = io();
                                var data = {module: "photo", element: currentElement, value: currentVal};
                                HzSocket.emit('autosave', data);
                            }
                        }
                    }, 3000);

                }
            }
        },
        link: function (scope, element, attrs, ngModel) {

        }
    }
}]);

HTML

    <hz-auto-save-textarea ng-model="asContainer" placeholder="Description" id="{{result.photo_id}}" class="album_commentarea margin_top5 autosave"></hz-auto-save-textarea>

我不知道如何防止触发多次套接字请求和其他合格的JavaScript事件。

Answer 1

将autosave逻辑移动到仅执行一次的指令工厂函数：

.directive("hzAutoSaveTextarea", ['$timeout', '$interval', 'HzSocket', function ($timeout, $interval, HzSocket) {
    var currentElement = null;

    var currentVal = null, previousVal = null;
    $interval(function () {
        currentVal = angular.element(".active-element").val();
        if (null !== currentVal && undefined !== currentVal && "" !== currentVal) {
            console.log("value::" + angular.element(".active-element").val());
            if (previousVal !== currentVal) {
                console.log("save data to console");
                previousVal = currentVal;
                var socket = io();
                var data = {module: "photo", element: currentElement, value: currentVal};
                HzSocket.emit('autosave', data);
            }
        }
    }, 3000);

    return {
        restrict: "E",
        replace: true,
        require: "ngModel",
        scope: {},
        template: "<textarea></textarea>",
        compile: function (scope, element) {
            return {
                pre: function (scope, element, attrs) {
                    element.on("click", function (e) {
                        e.preventDefault();
                        currentElement = attrs.id;
                        console.log("focused element:" + currentElement);
                        angular.element(".autosave").removeClass("active-element");
                        element.addClass("active-element");
                    });
                },
                post: function (scope, element, attrs) {
                }
            }
        }
    }
}]);

这样只会设置一个$interval，这就是你需要的。

Answer 2

为每个指令创建一个间隔，因此您将获得这10个事件。我建议将间隔移到一个公共服务。

AngularJS指令调用多次而不是调用一次

2 个答案: