У меня есть приложение 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.
Вместо того, чтобы делать это за элемент, вы можете создать шаблон для редактирования и один для чтения, а затем выполнить их замену, изменив переменную, переданную в ng-include
зависимости от того, находитесь ли вы в режиме редактирования или нет.
enable / disable
и множество других функций. Я использую его для одного из своих приложений, и это экономит время.