Angular 中的 $scope 与 controller 的关系详解-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，$scope 和 controller 是两个非常重要的概念，它们之间的关系也非常密切。$scope 是 Angular 中的一个对象，它用于在视图和控制器之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在本文中，我们将详细介绍 $scope 和 controller 之间的关系，并提供一些实例代码来帮助你更好地理解这些概念。

$scope 的基本用法

在 Angular 应用中，$scope 是一个关键的概念，它用于在控制器和视图之间传递数据和方法。$scope 对象是一个 JavaScript 对象，它充当了一个中间人的角色，将控制器中的数据和方法绑定到视图上。当控制器中的数据或方法发生变化时，$scope 对象会自动更新视图，从而使应用程序保持同步。

在 Angular 中，我们可以使用 $scope 对象来定义视图中的变量和函数。例如，我们可以定义一个 $scope 变量来存储用户的姓名：

app.controller('myCtrl', function($scope) {
  $scope.name = "John Doe";
});

在这个例子中，我们创建了一个名为 myCtrl 的控制器，并将 $scope.name 赋值为 "John Doe"。在视图中，我们可以使用这个变量来显示用户的姓名：

<div ng-controller="myCtrl">
  <p>My name is {{name}}</p>
</div>

当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，它是整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。

controller 的基本用法

在 Angular 中，controller 是用于控制视图和数据的逻辑部分。它可以访问 $scope 对象，并在其中定义变量和函数。当视图需要访问控制器中的数据或方法时，它可以通过 $scope 对象来实现。

在 Angular 中，我们可以使用 app.controller 方法来定义控制器。例如，我们可以定义一个名为 myCtrl 的控制器来控制一个视图：

app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});

在这个例子中，我们定义了一个名为 myCtrl 的控制器，并在其中定义了三个 $scope 变量：firstName、lastName 和 fullName。其中，fullName 是一个函数，它返回 firstName 和 lastName 的组合字符串。在视图中，我们可以使用这些变量和函数来显示用户的姓名：

<div ng-controller="myCtrl">
  <p>First Name: {{firstName}}</p>
  <p>Last Name: {{lastName}}</p>
  <p>Full Name: {{fullName()}}</p>
</div>

当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，并将其作为整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。

$scope 和 controller 的关系

在 Angular 中，$scope 和 controller 之间的关系非常密切。$scope 对象用于在控制器和视图之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在一个控制器中，我们可以访问 $scope 对象，并在其中定义变量和函数。这些变量和函数可以在视图中使用，从而实现控制器和视图之间的数据绑定。

例如，我们可以在控制器中定义一个 $scope 变量，然后在视图中使用它来显示数据：

app.controller('myCtrl', function($scope) {
  $scope.message = "Hello, World!";
});

<div ng-controller="myCtrl">
  <p>{{message}}</p>
</div>

在这个例子中，我们定义了一个名为 myCtrl 的控制器，并将 $scope.message 赋值为 "Hello, World!"。在视图中，我们使用 {{message}} 来显示这个变量的值。当 Angular 启动应用程序时，它会自动创建一个 $rootScope 对象，并将其作为整个应用程序的根作用域。在 $rootScope 中定义的变量和函数可以在所有的子作用域中访问。当我们创建一个控制器时，Angular 会自动为我们创建一个新的作用域，并将其作为 $rootScope 的子作用域。这样，我们就可以在控制器中定义变量和函数，并将它们绑定到视图上。

示例代码

下面是一个完整的 Angular 应用程序，它演示了如何在控制器和视图之间使用 $scope 对象来传递数据和方法：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <title>Angular Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp">

<div ng-controller="myCtrl">
  <p>First Name: <input type="text" ng-model="firstName"></p>
  <p>Last Name: <input type="text" ng-model="lastName"></p>
  <p>Full Name: {{fullName()}}</p>
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  };
});
</script>

</body>
</html>

在这个例子中，我们创建了一个名为 myApp 的 Angular 应用程序，并定义了一个名为 myCtrl 的控制器。在控制器中，我们定义了三个 $scope 变量：firstName、lastName 和 fullName。其中，fullName 是一个函数，它返回 firstName 和 lastName 的组合字符串。在视图中，我们使用 ng-model 指令来绑定输入框中的值到 $scope 变量上，使用 {{fullName()}} 来显示用户的全名。当用户在输入框中输入数据时，Angular 会自动更新 $scope 变量，并将变量的值绑定到视图中。

总结

在 Angular 中，$scope 和 controller 是两个非常重要的概念，它们之间的关系也非常密切。$scope 对象用于在控制器和视图之间传递数据和方法，而 controller 则是用于控制视图和数据的逻辑部分。在一个控制器中，我们可以访问 $scope 对象，并在其中定义变量和函数。这些变量和函数可以在视图中使用，从而实现控制器和视图之间的数据绑定。在实际开发中，我们需要深入理解 $scope 和 controller 的关系，并掌握它们的基本用法，才能更好地开发 Angular 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b2efc7d4982a6eb586031