在 AngularJS 应用程序中，有时我们可能需要在表达式的值未定义时展示一个占位符。例如，在加载数据过程中，我们不希望页面上的元素显示为白屏或空白，而是应该有一个友好的提示文本。
1. 使用 ngIf 指令
使用 ngIf 指令可以方便地检查表达式是否为真，并根据结果来显示或隐藏元素。因此，我们可以使用 ngIf 指令来判断表达式的值是否已经被定义。如果未定义，则可以显示一个占位符。
以下是一个使用 ngIf 来显示默认值的例子：
<div ng-controller="MyController">
<div ng-if="!myValue">Loading...</div>
<div>{{ myValue }}</div>
</div>在这个例子中，如果 myValue 未定义，那么 Loading... 就会被显示出来。否则，myValue 的值就会被显示出来。
2. 使用 ngBind 指令
使用 ngBind 指令可以将表达式的值绑定到指定的 HTML 元素中，并且会自动更新元素的内容，使其反映表达式的最新值。如果表达式的值未定义，则元素的内容就不会更新，因此我们可以在元素中添加一个默认值。
以下是一个使用 ngBind 来显示默认值的例子：
<div ng-controller="MyController"> <div ng-bind="myValue || 'Loading...'"></div> </div>
在这个例子中，如果 myValue 未定义，那么 Loading... 就会被显示出来。否则，myValue 的值就会被绑定到元素中，并且自动更新。
3. 使用 ngBindHtml 指令
如果我们想要在占位符中显示更复杂的 HTML 内容，例如一个包含图片和链接的加载动画，那么 ngBindHtml 指令就非常有用了。使用此指令可以将 HTML 字符串解析为实际的 HTML 元素，并将其插入到指定的元素中。
以下是一个使用 ngBindHtml 来显示默认值的例子：
<div ng-controller="MyController" ng-bind-html="myValue || loadingTemplate"></div> <script type="text/ng-template" id="loading-template"> <img src="loading.gif" alt="Loading..."> <p>Loading data, please wait...</p> </script>
在这个例子中，如果 myValue 未定义，那么 loadingTemplate 中的 HTML 内容就会被显示出来。否则，myValue 的值就会被解析为 HTML 并插入到元素中。
总结
在 AngularJS 应用程序中，我们可以使用多种方式来显示未定义表达式值的占位符，例如使用 ngIf、ngBind 或 ngBindHtml 指令。选择哪种方式取决于具体的需求和场景。
无论我们选择哪种方式，都应该牢记一些最佳实践：
- 为占位符使用合适的样式和文本。
- 使用语义化的 HTML 标签和属性来构建占位符。
- 在占位符中添加一个友好的提示文本。
希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25288