AngularJS控制器详解及示例代码，如何正确使用控制器实现数据绑定？

AngularJS控制器详解及示例代码

AngularJS作为经典的JavaScript前端框架,其控制器（Controller）是连接视图（View）与模型（Model）的核心桥梁，控制器主要负责初始化视图状态、处理用户交互，并通过$scope对象实现数据绑定，本文将深入解析控制器的核心概念、使用方法及最佳实践，并提供完整示例代码。

控制器的核心概念

控制器在AngularJS中通过angular.module().controller()方法定义，本质上是一个构造函数或JavaScript对象，它的主要职责包括：

1. 初始化$scope：将数据和方法绑定到$scope，使视图能够访问模型数据。
2. 处理业务逻辑：封装用户交互（如表单提交、按钮点击）的处理逻辑。
3. 管理视图状态：控制视图的显示与隐藏、数据验证等动态行为。

控制器的作用域（Scope）是分层的，嵌套控制器会继承父控制器的$scope，形成原型链继承关系。

控制器的定义与使用

基本语法

angular.module('myApp', [])  
  .controller('UserController', ['$scope', function($scope) {  
    $scope.name = '张三';  
    $scope.age = 25;  
    $scope.sayHello = function() {  
      alert('你好，' + $scope.name + '！');  
    };  
  }]);  

通过依赖注入（DI）将$scope传入控制器，避免全局变量污染。

控制器与视图绑定

在HTML中,通过ng-controller指令将控制器与视图关联：

<div ng-controller="UserController">  
  <p>姓名：{{name}}</p>  
  <p>年龄：{{age}}</p>  
  <button ng-click="sayHello()">打招呼</button>  
</div>  

当视图加载时,AngularJS会实例化控制器，并将$scope中的数据与方法渲染到页面。

控制器的高级特性

控制器间的通信

• 通过依赖注入共享$scope：父子控制器可直接继承父作用域的数据。
• 通过服务（Service）：推荐使用自定义服务实现跨控制器通信，避免耦合。

控制器的生命周期

控制器在以下阶段触发：

• $onInit：AngularJS 1.6+引入，用于初始化逻辑。
• $onChanges：当绑定数据变化时触发。
• $onDestroy：控制器销毁前执行，用于清理资源。

控制器的最佳实践

• 避免在控制器中操作DOM：应通过指令或服务处理DOM操作。
• 保持控制器轻量级：复杂逻辑应抽离到服务或工厂中。
• 使用控制器As语法：避免直接依赖$scope，改用this绑定数据，减少作用域嵌套问题。

示例代码：用户信息管理

以下是一个完整的用户信息管理示例,包含数据绑定、方法调用及表格展示：

定义控制器

angular.module('userApp', [])  
  .controller('UserListController', ['$scope', function($scope) {  
    $scope.users = [  
      {id: 1, name: '张三', age: 25},  
      {id: 2, name: '李四', age: 30}  
    ];  
    $scope.newUser = {name: '', age: ''};  
    $scope.addUser = function() {  
      if ($scope.newUser.name && $scope.newUser.age) {  
        $scope.users.push({  
          id: $scope.users.length + 1,  
          name: $scope.newUser.name,  
          age: $scope.newUser.age  
        });  
        $scope.newUser = {name: '', age: ''};  
      }  
    };  
    $scope.deleteUser = function(id) {  
      $scope.users = $scope.users.filter(user => user.id !== id);  
    };  
  }]);  

视图模板

<div ng-app="userApp" ng-controller="UserListController">  
  <h2>用户列表</h2>  
  <table border="1" cellpadding="5">  
    <thead>  
      <tr>  
        <th>ID</th>  
        <th>姓名</th>  
        <th>年龄</th>  
        <th>操作</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr ng-repeat="user in users">  
        <td>{{user.id}}</td>  
        <td>{{user.name}}</td>  
        <td>{{user.age}}</td>  
        <td><button ng-click="deleteUser(user.id)">删除</button></td>  
      </tr>  
    </tbody>  
  </table>  
  <div style="margin-top: 20px;">  
    <h3>添加用户</h3>  
    <input type="text" ng-model="newUser.name" placeholder="姓名">  
    <input type="number" ng-model="newUser.age" placeholder="年龄">  
    <button ng-click="addUser()">添加</button>  
  </div>  
</div>  

功能说明

• 数据展示：通过ng-repeat循环渲染用户列表。
• 添加用户：输入姓名和年龄后点击按钮，将新用户添加到数组。
• 删除用户：点击删除按钮，根据ID移除对应数据。

AngularJS控制器是MVC架构中的关键组件,合理使用控制器能提升代码的可维护性与可读性，开发者需注意控制器的职责边界，避免过度膨胀，并通过服务、指令等模块化工具优化代码结构，掌握控制器的核心用法与最佳实践，是构建高效AngularJS应用的基础。