AngularJS控制器数据绑定{{$ctrl.test}}失效问题排查

首先，你的数据绑定失效的核心原因是路由配置中缺少controllerAs的指定，导致模板里的$ctrl无法关联到你的控制器实例。

修复步骤 #

在todo-item.js的路由配置中，添加controllerAs: '$ctrl'即可解决问题：

'use strict';
angular.module('todoItem', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/todoItem', {
    templateUrl: 'todo-item/todo-item.template.html',
    controller: 'TodoItemCtrl',
    controllerAs: '$ctrl' // 新增这一行，指定控制器别名
  });
}])
.controller('TodoItemCtrl', [function() {
  this.test = [1, 2, 3, 4];
}]);

为什么这能解决问题？AngularJS的路由默认不会自动将控制器实例以$ctrl为别名暴露给模板，你必须显式声明这个别名，模板里的$ctrl.test才能正确指向控制器中this.test的数据。

AngularJS新手调试指南 #

针对这类数据绑定问题，你可以用这些实用方法排查：

• 快速验证别名是否生效：在模板里添加{{$ctrl}}，如果页面显示undefined，就说明别名没有正确配置，这是最直观的判断方式。
• 使用AngularJS Batarang工具：这是Chrome的官方扩展，可以直接查看当前页面的所有作用域、控制器实例和绑定的数据，能帮你快速定位变量是否存在。
• 控制台直接访问控制器实例：
  1. 打开浏览器控制台，输入：

     // 获取ng-view对应的作用域
     var viewScope = angular.element(document.querySelector('[ng-view]')).scope();
     // 如果配置了controllerAs: '$ctrl'，就可以直接访问
     console.log(viewScope.$ctrl.test);
     

  这样就能查看控制器里的数据是否正确传递到了模板作用域。
• 临时切换到$scope绑定（可选）：如果你暂时不想配置controllerAs，可以在控制器中注入$scope，把数据绑定到$scope上：

  .controller('TodoItemCtrl', ['$scope', function($scope) {
    $scope.test = [1, 2, 3, 4];
  }])
  

  然后模板里直接用{{test}}和ng-repeat="i in test"，不过controllerAs的方式更清晰，能避免作用域嵌套带来的混乱，更推荐长期使用。

额外检查 #

你的其他代码（app.js、index.html）看起来都没问题：模块依赖正确，脚本加载顺序也符合AngularJS的要求，所以只要修复路由的controllerAs配置，数据绑定就能正常工作了。

内容的提问来源于stack exchange，提问作者marno11