可滿足的佔位符在保存時需要爲空

Question

在我工作的公司，我們接手了一個使用symfony2和angular.js製作的項目。 這是一個包含課程的平臺。這些課程實際上是「書籍」，它們與視頻和地點進行互動以討論課程內容。

課程由許多章節組成，每章都有一組頁面。 在角度上開發了這個功能的人，使用帶有contenteditable屬性的div來輸入文本。 （請參閱屏幕截圖：http://imgur.com/kqpelaG）div也具有sk-placeholder屬性。

我知道角度的基礎知識，我推測sk-placeholder屬性是一個指令，用一些文本替換div的內容。顯然，contenteditable是使用屬性sk-placeholder的內容填充元素的指令。 （在這種情況下是一個div）。

在可編輯元素中，如果按下回車鍵，內容將被保存。但是，如果您不填寫任何內容，佔位符文本不會被刪除，並且它被假定爲您正在處理的頁面的特定部分的內容。 （我希望我很清楚，如果有任何問題，請問）。保存時應默認清除所有div屬性爲「contenteditable」的內容。這是我無法想象的部分。

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")