AngularJS 控制器详解-JavaScript中文网-JavaScript教程资源分享门户

AngularJS 是一款流行的前端 JavaScript 框架，它采用 MVC（模型-视图-控制器）架构，其中控制器扮演着重要的角色。控制器负责将模型和视图连接起来，实现业务逻辑和用户交互。

本文将深入探讨 AngularJS 控制器的使用方法和注意事项，希望能够帮助读者更好地理解和应用这一技术。

控制器的基本用法

在 AngularJS 中，控制器是通过 ng-controller 指令来定义的。例如：

<div ng-controller="myCtrl">
  <!-- 控制器作用域中的 HTML 代码 -->
</div>

其中 myCtrl 是控制器的名称，它对应一个 JavaScript 函数：

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

控制器函数接受一个 $scope 参数，它是控制器作用域的引用。通过 $scope 对象，控制器可以访问和修改作用域中的数据和函数。

例如，以下代码定义了一个简单的控制器，用于在页面中显示当前时间：

// www.javascriptcn.com code example
<div ng-controller="timeCtrl">
  <p>当前时间是：{{time}}</p>
</div>

<script>
angular.module('myApp', []).controller('timeCtrl', function($scope) {
  $scope.time = new Date();
});
</script>

该控制器使用 JavaScript 的 Date 对象来获取当前时间，并将其保存在 $scope.time 中。在 HTML 中通过双花括号表达式 {{time}} 来显示时间。

控制器的作用域

在 AngularJS 中，每个控制器都有自己的作用域。控制器作用域是一个 JavaScript 对象，它包含了控制器中定义的所有数据和函数。

控制器作用域可以继承父级作用域。例如，以下代码定义了一个父级控制器和一个子级控制器：

// www.javascriptcn.com code example
<div ng-controller="parentCtrl">
  <p>父级作用域：{{parentData}}</p>
  <div ng-controller="childCtrl">
    <p>子级作用域：{{childData}}</p>
  </div>
</div>

<script>
angular.module('myApp', []).controller('parentCtrl', function($scope) {
  $scope.parentData = '父级数据';
}).controller('childCtrl', function($scope) {
  $scope.childData = '子级数据';
});
</script>

子级控制器 childCtrl 继承了父级控制器 parentCtrl 的作用域，因此可以访问父级控制器中定义的数据 $scope.parentData。

控制器的生命周期

在 AngularJS 中，控制器有自己的生命周期。控制器的生命周期包括以下几个阶段：

创建阶段：控制器被创建时调用，一般在页面加载时执行。
初始化阶段：控制器初始化时调用，一般在创建阶段之后执行。
销毁阶段：控制器被销毁时调用，一般在页面卸载时执行。

控制器的生命周期函数可以通过 $scope 对象来定义。例如，以下代码定义了一个控制器，它在创建和销毁时分别输出日志：

angular.module('myApp', []).controller('myCtrl', function($scope) {
  console.log('控制器被创建');
  $scope.$on('$destroy', function() {
    console.log('控制器被销毁');
  });
});

$scope.$on() 函数用于监听事件，'$destroy' 事件表示控制器被销毁。在 $destroy 事件触发时，控制器会执行回调函数，输出日志信息。

控制器的最佳实践

在使用 AngularJS 控制器时，有一些最佳实践需要遵循，以确保代码的可读性和可维护性。以下是一些常见的最佳实践：

控制器应该保持简洁，只包含业务逻辑和数据处理代码。视图相关的代码应该放在指令中。
控制器应该使用依赖注入来获取服务和数据，而不是直接在控制器内部创建对象和获取数据。
控制器中的代码应该遵循单一职责原则，每个函数只处理一个特定的任务。
控制器应该使用 $watch 函数来监听数据变化，而不是在 HTML 中使用双向绑定。双向绑定会导致性能问题和难以调试的情况。
控制器应该使用 $emit 和 $broadcast 函数来发送事件，而不是在 HTML 中使用 ng-click 和 ng-change 等指令。事件机制可以更好地解耦控制器和视图。

控制器的示例代码

以下是一个使用 AngularJS 控制器的示例代码，它实现了一个简单的 TODO 应用：

// www.javascriptcn.com code example
<div ng-app="myApp" ng-controller="todoCtrl">
  <h2>TODO</h2>
  <ul>
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span ng-class="{done: todo.done}">{{todo.text}}</span>
      <a href="#" ng-click="remove($index)">删除</a>
    </li>
  </ul>
  <form ng-submit="add()">
    <input type="text" ng-model="newTodoText" placeholder="添加新任务">
    <button type="submit">添加</button>
  </form>
</div>

<script>
angular.module('myApp', []).controller('todoCtrl', function($scope) {
  $scope.todos = [
    {text: '学习 AngularJS', done: false},
    {text: '编写应用程序', done: false}
  ];

  $scope.add = function() {
    $scope.todos.push({text: $scope.newTodoText, done: false});
    $scope.newTodoText = '';
  };

  $scope.remove = function(index) {
    $scope.todos.splice(index, 1);
  };
});
</script>

该控制器定义了一个 $scope.todos 数组，用于存储 TODO 任务。在 HTML 中使用 ng-repeat 指令来遍历任务列表，并使用 ng-model 指令实现双向绑定。添加和删除任务的逻辑通过 $scope.add() 和 $scope.remove() 函数来实现。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d11a3ea941bf713425717e

AngularJS 控制器详解

控制器的基本用法

控制器的作用域

控制器的生命周期

控制器的最佳实践

控制器的示例代码

接着读