📌  相关文章
📜  AngularJS-控制器(1)

📅  最后修改于: 2023-12-03 14:59:19.149000             🧑  作者: Mango

AngularJS 控制器

AngularJS 控制器是一个 JavaScript 函数，用于控制 AngularJS 应用程序中的视图。 控制器通过将数据和行为绑定到视图中的 HTML 元素，从而实现应用逻辑。

控制器可以在 HTML 页面中使用 ng-controller 指令定义，并且可以在其他 AngularJS 组件中使用。

创建控制器

可以使用模块的controller方法来创建一个控制器。下面的示例创建了一个名为myController的控制器，并将其绑定到一个 AngularJS 模块上：

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.greeting = 'Hello, AngularJS!';
  });

在控制器函数中，我们可以将属性和方法绑定到作用域对象 $scope 上。这里我们将一个属性 greeting 绑定到它，这个属性会在模板中被访问。

在模板中使用控制器

当你在 HTML 页面中使用ng-controller指令指定了一个控制器后，任何绑定到 $scope 对象上的属性和方法都可以在该指令所在的元素及其子元素中使用。

以下示例演示了如何在 HTML 页面中使用控制器管理数据：

<!DOCTYPE html>
<html>
<head>
  <title>My Angular App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
  <h1>{{greeting}}</h1>
</body>
</html>

这个示例中，我们指定了一个名为myController的控制器，并在<h1>元素中使用插值表达式绑定到在控制器中定义的 greeting 属性上。

控制器的作用域

控制器将其属性和方法绑定到作用域对象 $scope 上。在模板中，您可以通过访问这些属性和方法来使用控制器中的功能。

但是，控制器不能访问在其父控制器作用域中定义的属性和方法，因为 AngularJS 使用作用域继承来解析作用域。

控制器嵌套

在 AngularJS 中，控制器可以嵌套。嵌套控制器的 $scope 对象会继承其父控制器的 $scope 对象。

以下示例演示了如何创建一个具有子控制器的父控制器：

angular.module('myApp', [])
  .controller('parentController', function($scope) {
    $scope.greeting = 'Hello, AngularJS!';
  })
  .controller('childController', function($scope) {
    // 子控制器继承了父控制器的作用域对象
    $scope.childGreeting = 'Hi, child!';
  });

在模板中，我们可以使用嵌套的ng-controller指令来使用子控制器：

<body ng-app="myApp" ng-controller="parentController">
  <h1>{{greeting}}</h1>
  <!-- 子控制器 -->
  <div ng-controller="childController">
    <h2>{{childGreeting}}</h2>
  </div>
</body>

该示例创建了一个名为parentController的父控制器和一个名为childController的子控制器。子控制器继承了父控制器中定义的作用域变量greeting。

控制器的最佳实践

以下是一些在 AngularJS 中编写控制器的最佳实践：

  • 将逻辑代码尽量少地保留在控制器中，有助于使其更具可重用性和可测试性。将其移动到服务或指令中。
  • 不要使用控制器来处理 DOM 元素。使用指令来操作 DOM 元素。
  • 确保控制器的逻辑清晰明确，避免与其他应用程序组件混淆。最好为每个控制器定义一个单独的 JavaScript 文件。
  • 将数据绑定到控制器的 $scope 对象上，而不是直接在控制器函数中定义变量。这使得数据对其他控制器和组件可用，并支持作用域继承。