为何我的代码中的NG-Controller无法正常工作？

算力阿峰

2026-5-25

分析AngularJS中NG-Controller无法正常运行的常见原因

我来帮你排查下AngularJS里data-ng-controller失效的常见问题，结合你给出的代码来看，大概率是这些原因：

未正确定义指定的AngularJS模块及关联控制器
你的代码里声明了data-ng-app="myapp"，但没有创建这个模块，也没把SimpleController注册到模块中。AngularJS找不到对应的控制器，自然无法执行它的逻辑，ng-repeat也没有数据可以渲染。你需要在引入angular.min.js之后添加这段代码：

<script>
  // 初始化名为myapp的AngularJS模块
  var myApp = angular.module('myapp', []);
  
  // 注册SimpleController到myapp模块
  myApp.controller('SimpleController', function($scope) {
    // 定义ng-repeat需要的数据源
    $scope.customers = [
      {name: 'Alice', city: 'Chicago'},
      {name: 'Bob', city: 'Los Angeles'},
      {name: 'Charlie', city: 'Houston'}
    ];
  });
</script>

AngularJS脚本路径错误
检查<script src="scripts/lib/angular.min.js"></script>的文件路径是否正确。如果这个文件不存在或者路径写错，浏览器加载失败，整个AngularJS框架都无法工作，控制器肯定失效。你可以打开浏览器开发者工具的「Network」标签，查看这个脚本是否成功加载。
控制器脚本加载顺序错误
确保你的控制器代码是在angular.min.js之后加载的。如果控制器脚本先于AngularJS核心库加载，此时Angular还没初始化，控制器无法被注册到模块中。
指令拼写错误
虽然你用的data-ng-controller是符合HTML5规范的正确写法（避免自定义属性冲突），但还是要确认指令拼写是否正确——比如不小心写成ng-controllerr或者data-ng-controll这类错误，都会导致控制器不生效。同时也检查下data-ng-repeat、data-ng-model的拼写是否正确。