在 AngularJS 中使用 controller 是一种常见的方式来控制视图的行为。然而，在某些情况下，可能会遇到未定义的 controller 的错误。这种错误通常是由于 controller 名称的拼写错误或控制器文件未正确加载导致的。本文将介绍如何在 AngularJS 中解决此类问题。
检查控制器名称的拼写
在 AngularJS 中，控制器的名称必须与 JavaScript 文件中定义的名称完全匹配。如果控制器的名称拼写错误，AngularJS 将无法正确识别它。因此，我们应该始终仔细检查控制器名称的拼写。下面是一个示例：
<div ng-controller="myCtrl"> <p>Hello World!</p> </div>
angular.module("myApp", []).controller("MyCtrl", function($scope) {
$scope.firstName = "John";
});在这个例子中，我们写成了 myCtrl 而不是 MyCtrl。这将导致未定义的控制器错误。正确的写法应该是：
<div ng-controller="MyCtrl"> <p>Hello World!</p> </div>
angular.module("myApp", []).controller("MyCtrl", function($scope) {
$scope.firstName = "John";
});确保控制器文件已加载
如果控制器文件未正确加载，则可能会遇到未定义的控制器错误。为了确保控制器文件被加载，我们应该在 HTML 页面中正确引用它。下面是一个示例：
-- -------------------- ---- -------
--------- -----
------
------
--------- --------- -----------
------- ------------------------------------------------------------------------------------
------- --------------------------------------
-------
------
---- ---------------
---- -----------------------
-------- ------------------
------
------
-------
-------在这个例子中，我们引用了 scripts/controllers.js 文件，其中包含了名为 MyCtrl 的控制器。
使用 ng-controller 指令的重载功能
AngularJS 还提供了一种重载 ng-controller 指令的方法，可以在控制器未定义时避免抛出错误。这个方法是将控制器名称作为表达式传递给 ng-controller 指令，并使用 || 运算符为其指定一个默认值。如果表达式的值未定义，AngularJS 将使用默认值。下面是一个示例：
<div ng-controller="MyCtrl || DefaultCtrl">
<p>Hello {{firstName}}!</p>
</div>在这个例子中，如果 MyCtrl 未定义，则 AngularJS 将使用 DefaultCtrl 作为控制器。
结论
在 AngularJS 中遇到未定义的控制器错误时，应该首先仔细检查控制器名称的拼写，并确保控制器文件已正确加载。如果问题仍然存在，可以使用 ng-controller 指令的重载功能。这些技巧有助于确保 AngularJS 应用程序的正常运行。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------- --------- -----------
------- ------------------------------------------------------------------------------------
------- --------------------------------------
-------
------
---- ---------------
---- -----------------------
-------- ------------------
------
---- --------------------- -- -------------
-------- ------------------
------
------
-------
-------angular.module("myApp", []).controller("MyCtrl", function($scope) {
$scope.firstName = "John";
});
angular.module("myApp").controller("DefaultCtrl", function($scope) {
$scope.firstName = "Default";
});来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735a2580bc820c5824f9856