AngularJS ng-readonly 指令（超详细）

AngularJS ng-readonly 指令：让表单字段更智能

在前端开发中，表单控制是绕不开的核心模块。我们经常遇到这样的场景：用户填写完信息后，某些字段需要“只读”状态，比如订单编号、创建时间等。如果手动写逻辑去控制 readonly 属性，不仅容易出错，还难以维护。这时候，AngularJS 提供的 ng-readonly 指令就派上用场了。

ng-readonly 是 AngularJS 内置的表单指令之一，专门用于动态控制表单元素（如 input、textarea）的只读状态。它能根据绑定的表达式自动判断是否启用 readonly 属性，实现“数据驱动”的交互逻辑。

本文将带你从零开始掌握这个实用指令，结合真实案例，让你在项目中轻松驾驭它。

什么是 ng-readonly 指令？

ng-readonly 指令是 AngularJS 提供的内置指令，用于动态设置 HTML 表单元素的 readonly 属性。它的核心作用是：根据表达式的结果，决定某个输入框是否允许用户编辑。

想象一下，你正在开发一个用户信息管理页面。当用户点击“提交”按钮后，所有字段自动变为只读，防止误改。如果不使用 ng-readonly，你可能需要手动操作 DOM，比如用 document.getElementById(...).readOnly = true，代码又长又难维护。而用 ng-readonly，只需绑定一个布尔值表达式，一切自动搞定。

它的语法非常简单：

<input ng-readonly="表达式" />

表达式的结果必须是布尔值（true / false）。如果为 true，输入框变为只读；如果为 false，则可以编辑。

基本用法：绑定布尔变量

最基础的用法是绑定一个布尔类型的变量。我们通过一个完整的例子来演示。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS ng-readonly 指令示例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-controller="MainController">
  <h3>用户信息表单</h3>

  <!-- 用户名输入框，初始可编辑 -->
  <label>用户名：</label>
  <input type="text" ng-model="user.name" ng-readonly="isReadOnly" />

  <br><br>

  <!-- 开关按钮，控制只读状态 -->
  <button ng-click="toggleReadOnly()">切换只读状态</button>

  <br><br>

  <!-- 显示当前状态 -->
  <p>当前只读状态：{{ isReadOnly ? '是' : '否' }}</p>

  <script>
    // 创建 AngularJS 应用模块
    angular.module('myApp', [])
      .controller('MainController', function($scope) {
        // 初始化用户数据
        $scope.user = {
          name: '张三'
        };

        // 初始状态为可编辑（false 表示可编辑）
        $scope.isReadOnly = false;

        // 切换只读状态的函数
        $scope.toggleReadOnly = function() {
          $scope.isReadOnly = !$scope.isReadOnly; // 取反
        };
      });
  </script>
</body>
</html>

代码说明：

ng-model="user.name"：双向绑定用户名输入框的值。
ng-readonly="isReadOnly"：将只读状态绑定到 isReadOnly 变量。
ng-click="toggleReadOnly()"：点击按钮时调用函数切换状态。
isReadOnly 初始为 false，表示可编辑；切换后变为 true，输入框自动变只读。

✅ 重点提示：ng-readonly 并不会阻止数据绑定，只是阻止用户输入。如果通过 ng-model 修改变量值，依然可以更新视图。

动态表达式：复杂条件控制只读状态

ng-readonly 支持任意合法的 AngularJS 表达式，不局限于简单变量。你可以结合多个条件来控制只读状态。

示例：根据角色和状态决定是否只读

<h3>权限控制表单</h3>

<label>用户名：</label>
<input type="text" ng-model="user.username" ng-readonly="user.role === 'admin' || user.status === 'locked'" />

<p>角色：{{ user.role }}，状态：{{ user.status }}</p>

<script>
  $scope.user = {
    username: '李四',
    role: 'user',     // 可为 'admin' 或 'user'
    status: 'active' // 可为 'locked' 或 'active'
  };
</script>

表达式解析：

user.role === 'admin' || user.status === 'locked'

如果用户角色是 admin，则只读；
如果用户状态是 locked，则只读；
只要满足任一条件，输入框就变为只读。

这个例子展示了 ng-readonly 的灵活性。它不是静态的，而是“按需启用”的，非常适合权限系统、流程审批等复杂场景。

与 ng-disabled 的区别：别搞混了！

很多初学者容易把 ng-readonly 和 ng-disabled 混为一谈。它们虽然都影响输入框的交互，但本质不同。

特性	ng-readonly	ng-disabled
是否可编辑	是，但不能修改内容	不能编辑，也不响应输入
是否参与表单提交	是，值仍会被提交	否，值不会被提交
样式变化	通常只是文字变灰	通常会变暗或禁用
适用场景	只读显示、数据展示	按钮禁用、表单控制

实际对比

<!-- 只读（值仍可提交） -->
<input type="text" ng-model="data" ng-readonly="true" />

<!-- 禁用（值不提交） -->
<input type="text" ng-model="data" ng-disabled="true" />

📌 小贴士：如果你希望用户看到信息但不能改，用 ng-readonly；如果希望完全“屏蔽”这个字段，用 ng-disabled。

高级应用：结合表单状态控制

在实际项目中，我们常需要根据表单整体状态来控制字段。比如“编辑模式”和“查看模式”的切换。

场景：切换“编辑”与“查看”模式

<h3>信息详情页</h3>

<!-- 切换按钮 -->
<button ng-click="isEditing = !isEditing">
  {{ isEditing ? '结束编辑' : '开始编辑' }}
</button>

<br><br>

<!-- 姓名输入框 -->
<label>姓名：</label>
<input type="text" ng-model="profile.name" ng-readonly="!isEditing" />

<!-- 年龄输入框 -->
<label>年龄：</label>
<input type="text" ng-model="profile.age" ng-readonly="!isEditing" />

<!-- 保存按钮 -->
<button ng-click="saveProfile()" ng-disabled="!isEditing">
  保存修改
</button>

<script>
  $scope.isEditing = false; // 初始为查看模式

  $scope.profile = {
    name: '王五',
    age: 28
  };

  $scope.saveProfile = function() {
    alert('已保存：' + $scope.profile.name + '，' + $scope.profile.age);
    $scope.isEditing = false; // 保存后回到查看模式
  };
</script>

运行逻辑：

初始 isEditing = false，所有输入框只读。
点击“开始编辑”，isEditing = true，输入框变为可编辑。
点击“保存”，调用 saveProfile，并自动关闭编辑模式。

这个模式在后台管理系统中非常常见，ng-readonly 是实现“查看-编辑”切换的关键。

常见问题与最佳实践

1. 为什么 `ng-readonly` 不生效？

检查表达式是否返回布尔值，比如 1 或 '' 会视为 true，导致意外只读。
确保 AngularJS 已正确加载，模块已注册。
检查是否在 ng-controller 外使用，导致作用域缺失。

2. 如何在表单提交时区分只读字段？

ng-readonly 不影响表单提交。只要字段有 ng-model，其值就会被包含在表单数据中。如果需要“屏蔽”某些字段，应使用 ng-disabled 或 ng-hide。

3. 最佳实践建议：

优先使用 ng-readonly 实现“只读展示”。
避免在 ng-readonly 中写复杂逻辑，保持表达式简洁。
配合 ng-show / ng-hide 使用，实现更复杂的 UI 控制。
在表单验证中，只读字段仍可参与 required 验证（但不可输入）。

总结：掌握 `ng-readonly`，提升开发效率

AngularJS ng-readonly 指令 是一个轻量但强大的工具，它让表单控制更加灵活、可维护。从基础的布尔绑定，到复杂的条件判断，再到与表单状态联动，它都能胜任。

本文通过多个真实场景，带你一步步理解其原理与用法。无论是权限控制、流程审批，还是“查看-编辑”切换，ng-readonly 都能帮你快速实现。

记住：让数据驱动 UI，而不是手动操作 DOM。这才是 AngularJS 的精髓所在。

当你在下一个项目中需要实现“只读字段”时，不妨试试 ng-readonly。它不仅能减少代码量，还能提升代码的可读性和可维护性。

前端开发不是写死代码，而是设计交互。而 ng-readonly，正是你实现智能表单的得力助手。