AngularJS ng-non-bindable 指令详解：防止模板表达式被解析
在使用 AngularJS 开发前端应用时，我们常常会遇到这样的场景：页面上有一段内容，原本是作为原始文本展示的，但因为 AngularJS 的数据绑定机制自动解析了花括号表达式，结果导致页面显示异常。比如，你本想展示 {{ user.name }} 这个字符串作为提示文本，结果它被渲染成了空值或报错。这时候，ng-non-bindable 指令就派上用场了。
这个指令的作用非常明确：告诉 AngularJS，该元素及其子元素中的所有绑定表达式（如 {{ }}）都不需要进行数据绑定处理。换句话说，它就是“屏蔽”数据绑定的开关。
想象一下，你在写一个代码示例的文档，希望读者看到的是原始的模板语法，而不是被渲染后的结果。如果没有 ng-non-bindable，你写的 {{ message }} 可能会被自动替换成空值，导致读者无法理解你的真实意图。这时候，ng-non-bindable 就像是一个“保护罩”，把这部分内容完整地保留下来。
什么是 ng-non-bindable 指令？
ng-non-bindable 是 AngularJS 内置的一个指令，它不会改变元素的行为，也不会影响 DOM 结构，它的唯一作用就是禁用当前元素及其所有子元素的数据绑定。
当 AngularJS 遍历 DOM 时，会自动识别并处理所有的 {{ }} 表达式。但一旦某个元素加上了 ng-non-bindable，AngularJS 就会跳过该元素内的所有表达式，直接将它们作为纯文本输出。
这个指令特别适合用于以下几种场景：
- 展示模板代码片段（如在文档中）
- 防止某些表达式被意外解析（如包含
{{的字符串） - 与第三方库共存时，避免干扰
基本语法与使用方式
ng-non-bindable 可以直接作为属性添加在 HTML 元素上，语法非常简单：
<div ng-non-bindable>
这里是原始文本，{{ 会被忽略 }}
</div>
在这个例子中，尽管内部含有 {{ }}，但 AngularJS 不会尝试解析它，而是原样输出。
实际案例：展示模板代码
假设你正在写一篇关于 AngularJS 的教程，需要展示如下模板代码：
<div ng-controller="MyController">
<p>欢迎，{{ user.name }}！</p>
<p>当前时间：{{ currentTime }}</p>
</div>
如果你直接插入到页面中，AngularJS 会尝试解析 {{ user.name }} 和 {{ currentTime }}，但此时控制器还没加载，变量不存在，页面会显示空白或报错。这时，你就可以用 ng-non-bindable 来保护这段代码：
<div ng-non-bindable>
<div ng-controller="MyController">
<p>欢迎，{{ user.name }}！</p>
<p>当前时间：{{ currentTime }}</p>
</div>
</div>
这样，页面上就会完整地显示原始模板，不会被解析，非常适合用于文档展示或教学示例。
指令生效范围：作用于整个元素及其子元素
ng-non-bindable 的作用范围是整个元素及其所有子元素。这意味着你只需要在父元素上添加该指令，其内部的所有表达式都会被忽略。
示例：嵌套结构中的使用
<div ng-non-bindable>
<h2>用户信息</h2>
<div>
<p>姓名：{{ user.name }}</p>
<p>邮箱：{{ user.email }}</p>
<p>登录时间：{{ loginTime }}</p>
</div>
</div>
在这个结构中，即使 div 内部嵌套了多个层级，所有 {{ }} 表达式都不会被绑定，而是作为纯文本显示。
⚠️ 注意：
ng-non-bindable只影响数据绑定，不影响其他指令（如ng-click、ng-show等）。如果你在元素上使用了ng-click，它仍然会正常工作。
与 ng-bind 的对比：理解核心差异
很多初学者容易混淆 ng-non-bindable 和 ng-bind，它们看似都和“绑定”有关，但作用完全相反。
| 指令 | 作用 | 使用场景 |
|---|---|---|
ng-non-bindable |
禁止数据绑定 | 展示模板代码、防止误解析 |
ng-bind |
强制绑定数据，替代 {{ }} |
保证表达式安全渲染，避免闪烁 |
示例对比
<!-- 使用 ng-non-bindable：不绑定，直接显示 -->
<div ng-non-bindable>
当前时间：{{ now }}
</div>
<!-- 使用 ng-bind：强制绑定，不会显示 {{ now }} -->
<div ng-bind="now"></div>
在第一个例子中，{{ now }} 会被原样输出；在第二个例子中，now 变量的值会被插入到 DOM 中，不会显示花括号。
所以，当你希望“保留原样”时，用 ng-non-bindable；当你希望“强制显示变量值”时，用 ng-bind。
实际应用场景：构建代码文档与示例页面
在开发文档、教学网站或 API 说明页面时，我们经常需要展示 AngularJS 的模板代码。如果没有 ng-non-bindable，这些代码就会被自动解析，导致无法正确展示。
案例：创建一个代码示例展示区
<div class="example-box" ng-non-bindable>
<h3>示例：用户登录表单</h3>
<form ng-controller="LoginFormController">
<input type="text" ng-model="username" placeholder="请输入用户名" />
<button type="submit" ng-click="login()">登录</button>
<p>状态：{{ loginStatus }}</p>
</form>
</div>
在这个例子中，.example-box 是一个代码展示区域。我们使用 ng-non-bindable 保证所有 {{ }} 表达式不会被解析，页面上会完整显示模板代码，方便读者理解结构和语法。
常见误区与注意事项
虽然 ng-non-bindable 很好用，但使用时也有一些容易踩坑的地方，需要特别注意。
1. 不能用于动态绑定的表达式
如果你在某个元素上使用了 ng-non-bindable，但又在 JavaScript 中通过 $scope 动态设置值，那这个值依然不会被解析。也就是说，ng-non-bindable 是“静态屏蔽”，不会因为后续代码而恢复。
<div ng-non-bindable>
<p>{{ message }}</p> <!-- 不会被绑定 -->
</div>
即使你在控制器中写：
$scope.message = "Hello World";
页面上仍然会显示 {{ message }}，而不是 Hello World。
2. 不影响其他指令
ng-non-bindable 不会影响 ng-click、ng-show、ng-if 等指令。它们依然会正常工作。
<div ng-non-bindable ng-click="alert('点击了！')">
点我！{{ 不会被解析 }}
</div>
点击这个按钮时，alert 仍然会弹出，说明 ng-click 有效。
3. 优先级高于默认绑定
ng-non-bindable 的优先级高于 AngularJS 的默认绑定机制。只要元素上存在该属性，无论嵌套多深，绑定都会被跳过。
总结：为什么你应该掌握这个指令？
AngularJS ng-non-bindable 指令 是一个看似简单但非常实用的功能。它让你在展示模板代码、构建文档、调试复杂结构时，能够精准控制哪些内容需要绑定，哪些需要“冻结”。
对于初学者来说，它能帮你避免“模板表达式被误解析”的常见问题；对于中级开发者，它是构建可读性高、结构清晰的前端文档的利器。
记住：当你要“保留原始文本”时，就用 ng-non-bindable。它不是万能的，但却是你开发流程中一个值得收藏的小工具。
在实际项目中，合理使用这个指令，能让你的代码更清晰、更易维护，也能减少因表达式误解析带来的调试成本。希望你通过本文，真正理解并掌握这个实用的 AngularJS 特性。