Angularjs: Отдельные элементы для режима «редактируемый» и «только для чтения»?

0

У меня есть приложение Angular с множеством элементов формы. В режиме "редактирования" пользователь может редактировать элементы ввода, изменять параметры, отмечать флажки и т.д. В режиме "чтения" он должен только читать эти значения. Только администраторы смогут редактировать что-либо на странице, другие люди смогут читать только контент.

То, что я хотел бы сделать, это просто есть использование сценария простые span или div элементов в режиме только для чтения, чтобы уменьшить число наблюдателей в целом. Реализация мудрая, мне всегда приходится определять два отдельных html-блока, как показано ниже.

exampleInput.tpl.html

Примечание. Я использую ng-if здесь, потому что я хочу удалить входной элемент из DOM в режиме только для чтения, чтобы уменьшить количество наблюдателей.

    <!-- editable mode. -->
    <input 
      ng-if="!$ctrl.isReadOnly()"
      ng-model="$ctrl.value" 
      value="$ctrl.value"
    />
    <!-- read only -->
    <span 
      ng-if="$ctrl.isReadOnly()"
      ng-bind="$ctrl.value">
    </span>

exampleInput.comp.js

    // The example-input component
    (function(){
      "use strict";
      angular
        .module("exampleInput", ["ngSanitize", "userSettings"])
        .component("exampleInput", {
          templateUrl: "exampleInput.tpl.html",
          bindings: {
            value: "="
          },
          transclude: true,
          controller: ["$scope", "userSettings", function($scope, userSettings){
              var ctrl = this;
              ctrl.isReadOnly = userSettings.isReadOnly;
            }
          ]
        });
    }());

Применение:

    <qa-input value="value.foobar">
    </qa-input>

Мой вопрос:

Есть ли лучший способ сделать это? Я знаю, что у меня может быть только один элемент ввода и использовать css для управления стилем в отключенном режиме, но это не удаляет наблюдателей, что является основной причиной для этого. Я новичок в Angular, поэтому любые советы приветствуются.

Я использую Angular 1.5.x.

  • 2
    Можете ли вы использовать что-то вроде этого ? Он уже имеет enable / disable и множество других функций. Я использую его для одного из своих приложений, и это экономит время.
  • 0
    Ого, я понятия не имел, что это вообще существовало! Спасибо за указание на это!
Теги:
forms

1 ответ

1
Лучший ответ

Вместо того, чтобы делать это за элемент, вы можете создать шаблон для редактирования и один для чтения, а затем выполнить их замену, изменив переменную, переданную в ng-include зависимости от того, находитесь ли вы в режиме редактирования или нет.

  • 0
    Это звучит как действительно отличная идея. Знаете ли вы, есть ли какие-либо воздействия на производительность, чтобы сделать это таким образом (при условии, что все мои файлы шаблонов хранятся в одном каталоге)?
  • 0
    Ни о чем я не знаю. Фактически, вы должны иметь возможность использовать синтаксис одноразового связывания {{:: variable}} везде в шаблоне только для чтения, чтобы сделать его действительно легким.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню