Angular.js中mainController无法被调用的问题咨询

先看你给出的代码里最明显的问题——你把ng-app="drawings"放在了<head>标签上！这会导致Angular只在<head>标签的范围内编译页面，而你的mainController肯定是绑定在<body>或者其他页面元素上的，Angular根本识别不到控制器的绑定，自然就调用不了。

第一步：把ng-app移到正确的位置 #

把ng-app="drawings"挪到<html>或者<body>标签上，这样Angular就能接管整个页面的编译了，修改后的HTML头部应该是这样：

<!DOCTYPE html>
<html lang="en" ng-app="drawings">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <!-- 记得在这里引入你的控制器JS文件，顺序要在Angular之后 -->
    <script src="path-to-your-controller.js"></script>
</head>
<!-- 然后在body或者需要的元素上绑定控制器 -->
<body ng-controller="mainController">
    <!-- 你的页面内容 -->
</body>
</html>

第二步：确认控制器的定义没问题 #

还要确保你正确定义了drawings模块和mainController，比如你的控制器JS文件里应该是这样写的：

// 先定义模块，注意模块名要和ng-app里的一致
var drawingsApp = angular.module('drawings', []);

// 然后注册控制器
drawingsApp.controller('mainController', function($scope) {
    // 写点测试逻辑验证一下，比如给scope加个变量
    $scope.welcomeText = "终于调用到mainController啦！";
});

其他需要排查的小细节 #

• 检查浏览器控制台（按F12打开开发者工具，看Console面板）有没有报错，比如“模块未定义”“控制器找不到”这类提示，这些能帮你快速定位问题
• 确保控制器的JS文件是在AngularJS脚本之后引入的，顺序错了也会导致控制器加载失败
• 如果你用到了ngRoute或者其他Angular插件，要记得在模块定义时注入依赖，比如angular.module('drawings', ['ngRoute'])

顺便提一句：你用的AngularJS 1.0.8是挺老的版本了，如果项目允许的话，建议升级到1.x的稳定版（比如1.8.2），能避开不少旧版本的已知bug。

内容的提问来源于stack exchange，提问作者programmer wanna be