Question

在我工作的公司，我们接管了一个用symfony2和angular.js制作的项目。这是一个包含课程的平台。这些课程实际上是“书籍”，与视频和地点互动，讨论课程内容。

课程由许多章组成，每章都有一组页面。使用具有可信属性的角度，使用div来开发此文本的人。（见截图：http://imgur.com/kqpelaG）div也有一个sk-placeholder属性。

我知道angular的基础知识，我认为sk-placeholder属性是一个指令，用一些文本替换div的内容。显然，contenteditable是使用sk-placeholder属性的指令来填充元素。（在这种情况下是一个div）。

在可编辑元素中，如果按Enter键，则会保存内容。但是，如果您没有填写任何内容，则不会删除占位符文本，并且会假定您正在处理的页面的特定部分的内容。（我希望我很清楚，如果有任何问题请问）。保存时，默认情况下应清除所有具有“contenteditable”属性的div的内容。这就是我无法弄清楚的部分。

SEK.app.directive('contenteditable', function($location, sekApi, $q){
       return {
       require: 'ngModel',
       restrict: 'A',
       link: function(scope, element, attrs, ctrl) {

        var richText = attrs.richText || false,
            focused = false;

        function renderMath () {
            if(richText) {
                var math = element[0];
                MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);
            }
        }

        function renderElement() {
            if(!ctrl.$viewValue && attrs.skPlaceholder) {
                element.addClass("sk-placeholding");
                element.html(attrs.skPlaceholder);
            } else {
                element.removeClass("sk-placeholding");
                element.html(ctrl.$viewValue);
                renderMath();
            }
        }

        ctrl.$render = function() {
            renderElement();
        };


        element[0].onpaste = function(e) {
            var pastedText = undefined;
            if (window.clipboardData && window.clipboardData.getData) { // IE
                pastedText = window.clipboardData.getData('Text');
            } else if (e.clipboardData && e.clipboardData.getData) {
                pastedText = e.clipboardData.getData('text/plain');
            }

            SEK.utilities.insertTextAtCursor(pastedText);
            // Prevent the default handler from running.
            return false;
        };

        element.bind('focus', function () {
            element.html(ctrl.$viewValue || "");
            element.removeClass("sk-placeholding");
            focused = true;
        });

        element.bind('blur', function(event) {
            var newViewValue = false;
            if(element.html().length > 0){
                var htmlContent = element.html();
                htmlContent = htmlContent.replace(/<div><br><\/div>/g, "<br>");
                htmlContent = htmlContent.replace(/<div><br \/><\/div>/g, "<br>");
                htmlContent = htmlContent.replace(/<div>/g, "<br>");
                htmlContent = htmlContent.replace(/<\/div>/g, "");
                newViewValue = htmlContent;
            }

            if(element.html().length == 0 && attrs.skPlaceholder) {
                newViewValue = "";
            };

            if(typeof newViewValue === "string") {
                scope.$apply(function() {
                    ctrl.$setViewValue(newViewValue);
                });
            }

            renderElement();

            focused = false;
        });

        element.bind('keydown', function(event) {
            var esc = event.which == 27,
                enter = event.which == 13,
                el = event.target;

            if(!richText && esc) {
                element.html(ctrl.$viewValue);
                el.blur();
                event.preventDefault();
            }

            if (esc || (!richText && enter)) {
                scope.ngModel = element.html();
                el.blur();
                event.preventDefault();
            }
        });
    }
}
});

任何问题都非常受欢迎。请注意，对于Angular.js来说，我是一个新手

Answer 1

保存检查：

attrs.skPlaceholder === element.html() || attrs.skPlaceholder === element.text()

如果此表达式返回true，则该元素似乎为空。

或者您可以查看：

element.hasClass("sk-placeholding")

保存时，可信任的占位符必须为空

1 个答案: