通过定义自定义角度指令将 HTML 输入字段更改为标签

Question

我在某些页面（角度模板）上有很多输入、文本区域和选择。 我想重新定义“输入”指令，这样它将从 localStorage 中获取类似ViewMode = true 的值并将所有输入转换为标签。如果我更改了ViewMode，那么页面刷新输入应该会正常运行。

但我不想在任何角度模板上编辑任何输入标签。

意味着我想覆盖输入、文本区域并选择作为我自己的角度指令。

我无法开始。我应该从哪里开始？ （我有使用新名称的自定义指令的经验，但没有任何令人兴奋的 HTML 标签名称）

注意：我不想使用只读（具有正确样式），因为它需要编辑所有输入标签。不仅我有具有隔离范围的自定义指令，因此我需要将 ViewMode 值传递给所有自定义指令。如果用户按下 CTRL+A 内容只读字段未被选中，则更是如此。

我正在寻找如下解决方案

ViewButtonClickEvent () {
   set localStorage.viewMode = true;
   callExistingEditMethod();
}

EditButtonClickEvent () {
  set localStorage.viewMode = false;
  callExistingEditMethod();
}

editPagesModule.directive('input', {
    if(localStorage.viewMode != true)
     //Keep all existing functionality with ng-model
    }
    else {
      //replace input with span or label.
    }
})

Answer 1

您可以创建名为 input、select 和 textarea 的指令，无需更改现有标记即可自动编译。

工作示例：JSFiddle & Plunker

看起来像这样：

angular.module('myApp', [])
  .directive('input', inputDirective)
  .directive('select', inputDirective)
  .directive('textarea', inputDirective)
  .factory('$editMode', editModeFactory)
;

inputDirective.$inject = ['$editMode'];
function inputDirective($editMode) {
  return {
    link: postLink
  };

  function postLink(scope, iElement, iAttr) {
    scope.$watch($editMode.get, function(edit) {
      if (iElement[0].nodeName === 'SELECT') {
        if (edit === 'true') iElement.removeAttr('disabled');
        else iElement.attr('disabled', true);
      }
      else {
        if (edit === 'true') iElement.removeAttr('readonly');
        else iElement.attr('readonly', true);
      }
    });
  }
}

editModeFactory.$inject = ['$window'];
function editModeFactory($window) {
  return {
    get: function() {
      return $window.localStorage.getItem('editMode');
    },
    set: function(value) {
      $window.localStorage.setItem('editMode', value);
    }
  };
}

我确实使用了readonly 属性（disabled 用于选择），因为我能想到的唯一其他选择是将整个输入元素替换为 div 之类的东西。您还必须缓存原始元素，以便稍后恢复它......并且这样做会破坏您的绑定，因此您必须每次都重新编译每个输入。这似乎是一个可怕的想法。