当你第一次学习AngularJS时，你可能会遇到ng-show指令。它被用于在应用中显示或隐藏元素，具有非常重要的作用。但是，你可能会遇到一个情况，在你认为这个指令应该工作的时候并没有生效。
本文将解释为什么在ng-show指令中出现问题以及如何解决这个问题。同时还会提供示例代码和实用建议。
问题描述
假设我们有一个简单的AngularJS应用，并想根据表单输入框中的内容来判断是否显示某个元素。
<input type="text" ng-model="myText"/> <div ng-show="myText">这是一个文本框</div>
上面的代码很简单，当我们在输入框中输入任何内容时，应该会显示文本框。然而，当我们尝试这样做时，发现文本框并未显示。
那么，问题出在哪里呢？
问题分析
模型的初始化
首先，我们需要知道的是在AngularJS的一个重要概念：模型。模型就是我们在JavaScript中定义的变量，可以用来存储应用程序状态。在上述示例中，myText就是模型名称。
如果模型未正确初始化或未在控制器中定义，那么当我们使用ng-show指令时它将不会生效。确保模型被正确初始化是解决这个问题的第一步。
例如，在上面的示例中，如果我们没有在控制器中为myText定义一个初始值，那么ng-show将无法正常工作。请看下面的代码：
// 定义控制器
app.controller('MyController', function($scope) {
$scope.myText = ''; // 必须定义初始值
});数据类型
其次，我们需要考虑数据类型。ng-show指令要求我们提供一个表达式（expression），该表达式必须返回一个布尔值。如果我们提供的表达式返回了一个非布尔值，则ng-show指令将不会正常工作。
例如，在下面的代码中，我们使用了一个非布尔值，即字符串：
<input type="text" ng-model="myText"/> <div ng-show="'myText'">这是一个文本框</div>
在这种情况下，ng-show指令将不会正常工作，因为字符串'myText'不是一个布尔值，并且不符合ng-show的要求。
范围（Scope）
最后，我们需要确保ng-show指令可以访问到模型。AngularJS使用**范围（scope）**来管理模型和指令之间的联系。如果ng-show指令在范围外部，那么它将无法正常工作。
因此，需要确保在正确的范围内使用ng-show。通常，我们会使用控制器（controller）来管理范围。
例如，在下面的代码中，我们通过将ng-controller指令应用于父元素来将控制器与视图关联：
<div ng-controller="MyController"> <input type="text" ng-model="myText"/> <div ng-show="myText">这是一个文本框</div> </div>
解决方案
综上所述，我们需要遵循以下步骤来确保ng-show指令正常工作：
- 确保模型被正确初始化，并在控制器中定义初始值。
- 确保表达式返回布尔值，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26199