在AngularJS中，为何需要在视图中引用控制器？

嘿，这个问题问到点子上了！在AngularJS的MVC架构里，视图（HTML）和控制器（JS）的关联是核心逻辑之一，引用控制器主要有这几个关键原因：

1. 搭建视图与数据/逻辑的连接桥梁 #

控制器里的$scope是视图和控制器之间的“传声筒”——只有视图引用了对应的控制器，AngularJS才会把该控制器的$scope绑定到这个视图区域上。这样视图里的指令（比如ng-repeat、ng-click）和插值表达式（{{}}）才能访问到$scope上的变量和方法。

拿你提供的代码举例：

(function(){
    var CustomersController = function($scope){
        $scope.sortBy = 'name';
        $scope.reverse = false;
        $scope.customers = [{joined:'1990-12-12',name:'Gabriel',city:'Arg',orderTotal:'989.4267'},{joined:'1979-04-08',name:'Pablo',city:'Chile',orderTotal:'123.4'},{joined:'1980-12-12',name:'Martin',city:'Peru',orderTotal:'25'}];
        $scope.doSort = function (propName){
            $scope.sortBy=propName;
            $scope.reverse=!$scope.reverse;
        }
    }
    // 这里注意：你需要把控制器注册到Angular模块里，否则视图找不到它
    angular.module('yourApp').controller('CustomersController', CustomersController);
})()

当你在视图里写：

<div ng-controller="CustomersController">
  <ul>
    <li ng-repeat="customer in customers | orderBy:sortBy:reverse">
      {{customer.name}} - {{customer.orderTotal}}
    </li>
  </ul>
  <button ng-click="doSort('name')">按名称排序</button>
</div>

正是因为ng-controller="CustomersController"这个引用，视图才能拿到$scope.customers数据进行遍历，也能触发$scope.doSort方法实现排序。

2. 实现业务逻辑与视图展示的解耦 #

AngularJS推崇“关注点分离”：视图只负责展示内容，控制器负责处理数据和交互逻辑。把排序、数据初始化这类逻辑放在控制器里，视图不用关心数据怎么来、怎么处理，只需要专注于渲染——这样代码更清晰，后期修改逻辑或者调整视图都更方便。

比如你代码里的doSort方法，所有排序的逻辑都封装在控制器里，视图只需要通过ng-click触发就行，不用在HTML里写复杂的逻辑。

3. 隔离作用域，避免变量污染 #

每个控制器都对应一个独立的$scope作用域。当你在不同的视图区域引用不同的控制器时，它们的$scope是相互独立的——这意味着你在CustomersController里定义的sortBy变量，不会和其他控制器里的同名变量冲突，页面上多个模块可以各自运行互不干扰。

另外提个小建议：你现在的代码里控制器只是在自执行函数里定义了，但没有注册到AngularJS的模块中，这样视图引用的时候会找不到这个控制器，记得加上angular.module('yourApp').controller('CustomersController', CustomersController)这行代码（把yourApp换成你实际的模块名）。

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