AngularJS学习第五篇：从Controller控制器谈谈$scope作用域

在AngularJS中，控制器（Controller）是连接视图（View）和模型（Model）的重要组件之一。控制器通过$scope对象来管理视图和模型之间的数据交互。本篇攻略将详细讲解$scope作用域的使用方法和示例。

$scope作用域的基本概念

$scope是AngularJS中的一个特殊对象，用于在控制器和视图之间传递数据。它充当了控制器和视图之间的桥梁，使得它们能够相互通信。通过在$scope对象上定义属性和方法，我们可以在控制器中处理数据，并将其传递给视图进行展示。

$scope作用域的创建

在AngularJS中，每个控制器都有自己的$scope对象。当控制器被实例化时，AngularJS会自动创建一个新的$scope对象，并将其绑定到控制器上。我们可以通过在控制器函数中添加$scope参数来访问和使用$scope对象。

以下是一个简单的示例，展示了如何创建一个控制器并使用$scope对象：

// 定义一个名为\"myController\"的控制器
app.controller('myController', function($scope) {
  // 在$scope对象上定义一个属性
  $scope.message = 'Hello, AngularJS!';
});

在上面的示例中，我们定义了一个名为\"myController\"的控制器，并在$scope对象上定义了一个名为\"message\"的属性。这个属性的值是\"Hello, AngularJS!\"。在视图中，我们可以通过{{message}}来显示这个属性的值。

$scope作用域的使用示例

示例1：计算器应用

下面是一个简单的计算器应用的示例，展示了如何使用$scope对象来处理用户输入并显示计算结果：

<div ng-controller=\"calculatorController\">
  <input type=\"number\" ng-model=\"num1\">
  <input type=\"number\" ng-model=\"num2\">
  <button ng-click=\"add()\">Add</button>
  <button ng-click=\"subtract()\">Subtract</button>
  <p>Result: {{result}}</p>
</div>

app.controller('calculatorController', function($scope) {
  $scope.add = function() {
    $scope.result = $scope.num1 + $scope.num2;
  };

  $scope.subtract = function() {
    $scope.result = $scope.num1 - $scope.num2;
  };
});

在上面的示例中，我们定义了一个名为\"calculatorController\"的控制器，并在$scope对象上定义了两个方法：add和subtract。这些方法分别用于执行加法和减法运算，并将结果保存在$scope对象的result属性中。在视图中，我们使用ng-model指令将输入框的值绑定到$scope对象的num1和num2属性上，并使用{{result}}来显示计算结果。

示例2：待办事项列表

下面是一个简单的待办事项列表的示例，展示了如何使用$scope对象来管理待办事项的添加和删除：

<div ng-controller=\"todoController\">
  <input type=\"text\" ng-model=\"newTodo\">
  <button ng-click=\"addTodo()\">Add</button>
  <ul>
    <li ng-repeat=\"todo in todos\">
      {{todo}}
      <button ng-click=\"deleteTodo($index)\">Delete</button>
    </li>
  </ul>
</div>

app.controller('todoController', function($scope) {
  $scope.todos = [];

  $scope.addTodo = function() {
    $scope.todos.push($scope.newTodo);
    $scope.newTodo = '';
  };

  $scope.deleteTodo = function(index) {
    $scope.todos.splice(index, 1);
  };
});

在上面的示例中，我们定义了一个名为\"todoController\"的控制器，并在$scope对象上定义了两个方法：addTodo和deleteTodo。addTodo方法用于添加新的待办事项到$scope对象的todos数组中，并清空输入框的值。deleteTodo方法用于从$scope对象的todos数组中删除指定索引的待办事项。在视图中，我们使用ng-repeat指令来遍历todos数组，并使用{{todo}}来显示每个待办事项的内容。每个待办事项后面都有一个\"Delete\"按钮，点击该按钮会调用deleteTodo方法来删除对应的待办事项。

总结

本篇攻略详细讲解了$scope作用域的使用方法和示例。通过在控制器中使用$scope对象，我们可以实现控制器和视图之间的数据交互。希望这篇攻略对你学习AngularJS有所帮助！

阅读剩余 50%