angularjs - 通过定义自定义 Angular 指令将 HTML 输入字段更改为标签

Question

我有很多输入、文本区域并在某些页面上进行选择( Angular 模板)。我想重新定义“input”指令，以便它将从 localStorage 获取类似 ViewMode = true 的值，并将所有输入转换为标签。如果我更改 ViewMode，那么页面刷新输入应该正常运行。

但我不想编辑任何 Angular 模板上的任何输入标签。

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

我无法启动。我应该从哪里开始？ (我有使用新名称的自定义指令的经验，但没有使用任何令人兴奋的 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 用于选择)，因为我能想到的唯一其他选项是将整个输入元素替换为类似分区您还必须缓存原始元素，以便稍后可以恢复它......而这样做会破坏您的绑定(bind)，因此您必须每次都重新编译每个输入。这似乎是一个可怕的想法。