AngularJS控制器函数如何定义使用？示例详解来了

在AngularJS开发中，控制器（Controller）是连接视图（View）与模型（Model）的核心组件，主要负责初始化$scope对象、定义业务逻辑以及处理用户交互，本文将详细介绍AngularJS中控制器函数的定义方式、作用域机制、数据绑定方法及实际应用示例,帮助开发者掌握这一核心概念。

控制器的定义与注册

控制器通过AngularJS的模块（Module）进行注册，使用controller方法定义其基本结构,基本语法如下：

angular.module('myApp', [])
  .controller('MyController', function($scope) {
    // 控制器逻辑
  });

第一个参数为控制器名称，第二个参数为构造函数，可通过依赖注入引入AngularJS内置服务或自定义服务，注入$http服务实现数据请求：

.controller('DataController', function($scope, $http) {
  $http.get('/api/data').then(function(response) {
    $scope.items = response.data;
  });
});

$scope的作用域机制

$scope是控制器与视图之间的桥梁,具有以下关键特性：

1. 分层作用域：控制器的作用域遵循DOM层级结构，子控制器可继承父控制器的$scope属性。
2. 双向数据绑定：视图中的数据变化会自动同步到$scope,反之亦然。
3. 生命周期：$scope随控制器的创建而初始化,随视图销毁而自动清理。

作用域继承表示例：

<div ng-controller="ParentController">
  {{parentMessage}}
  <div ng-controller="ChildController">
    {{childMessage}} <!-- 可访问parentMessage -->
  </div>
</div>

angular.module('myApp')
  .controller('ParentController', function($scope) {
    $scope.parentMessage = '来自父控制器的消息';
  })
  .controller('ChildController', function($scope) {
    $scope.childMessage = '来自子控制器的消息';
  });

控制器函数的常用方法

数据初始化

在控制器中初始化模型数据,供视图绑定使用：

.controller('ProductController', function($scope) {
  $scope.product = {
    name: 'AngularJS教程',
    price: 99.00,
    inStock: true
  };
});

事件处理方法

定义响应用户交互的函数,如按钮点击事件：

<button ng-click="addToCart()">加入购物车</button>

.controller('CartController', function($scope) {
  $scope.cartItems = [];
  $scope.addToCart = function(item) {
    $scope.cartItems.push(item);
  };
});

数据过滤与排序

通过$scope方法处理动态数据：

.controller('ListController', function($scope) {
  $scope.users = [
    {name: '张三', age: 25},
    {name: '李四', age: 30}
  ];
  $scope.orderBy = 'name';
});

视图可通过ng-repeat结合orderBy过滤器实现动态排序：

<ul>
  <li ng-repeat="user in users | orderBy:orderBy">
    {{user.name}} - {{user.age}}
  </li>
</ul>

控制器间的通信

通过$rootScope实现全局共享

.controller('GlobalController', function($rootScope) {
  $rootScope.globalMessage = '全局消息';
});

通过服务（Service）共享数据

推荐使用单例模式的服务实现控制器间通信：

angular.module('myApp')
  .service('DataService', function() {
    this.data = [];
    this.addData = function(item) {
      this.data.push(item);
    };
  });

.controller('ControllerA', function(DataService) {
  DataService.addData('数据A');
})
.controller('ControllerB', function(DataService) {
  console.log(DataService.data); // 输出: ['数据A']
});

最佳实践与注意事项

1. 保持控制器精简：控制器应只处理视图逻辑,复杂业务逻辑应抽离至服务中。
2. 避免直接操作DOM：通过数据绑定和指令（Directive）实现视图更新。
3. 合理使用依赖注入：明确声明所需服务,避免隐式依赖。
4. 命名规范：采用驼峰命名法，如UserManagementController。

控制器职责划分对比表：
| 推荐做法 | 不推荐做法 |
|———|———–|
| 初始化$scope数据 | 直接操作DOM元素 |
| 调用服务处理业务逻辑 | 在控制器内编写复杂算法 |
| 定义事件处理函数 | 包含重复的视图逻辑 |
| 通过服务共享数据 | 使用$rootScope传递临时数据 |

综合应用示例

以下是一个完整的用户列表管理示例,展示控制器的综合应用：

<div ng-controller="UserController">
  <input type="text" ng-model="newUser.name" placeholder="姓名">
  <input type="number" ng-model="newUser.age" placeholder="年龄">
  <button ng-click="addUser()">添加用户</button>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
    <tr ng-repeat="user in users">
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td><button ng-click="removeUser($index)">删除</button></td>
    </tr>
  </table>
</div>

angular.module('myApp')
  .controller('UserController', function($scope) {
    $scope.users = [
      {name: '王五', age: 28}
    ];
    $scope.newUser = {};
    $scope.addUser = function() {
      if ($scope.newUser.name && $scope.newUser.age) {
        $scope.users.push($scope.newUser);
        $scope.newUser = {};
      }
    };
    $scope.removeUser = function(index) {
      $scope.users.splice(index, 1);
    };
  });

通过以上示例可以看出，AngularJS控制器通过$scope实现数据绑定，结合服务实现逻辑复用，最终构建出响应式的单页应用，开发者在实际项目中应遵循单一职责原则，合理划分控制器功能,确保代码的可维护性和可扩展性。