Question

我有一个包含大量表单元素的Angular应用程序。在＆＃39;编辑＆＃39;在用户模式下，用户可以编辑输入项目，更改选项，标记复选框等。“阅读”＆＃39;模式，应该只能读取这个值。只有管理员才能编辑页面上的任何内容，其他人只能阅读内容。

我想要做的是让脚本在只读模式下使用普通span或div元素，以减少整体观察者的数量。实施明智，我总是必须定义两个单独的html＆＃39;块＆＃39;如下图所示。

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。

Answer 1

您可以创建一个用于编辑的模板和一个用于读取的模板，然后根据您是否处于编辑模式更改传递给ng-include的变量，而不是按元素执行操作。

Angularjs：可编辑的单独元素＆＃39;模式和＆＃39; readonly＆＃39;模式？

1 个答案: