AngularJS 项目中的控制器 - JavaScript

在 AngularJS 中，控制器是处理业务逻辑的组件之一。通过控制器，您可以定义作用于视图（HTML 元素）的函数或属性。当然，这些函数和属性必须先声明在控制器中。

创建控制器

可以通过以下方式在 AngularJS 中创建控制器：

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

解析控制器

一旦定义并创建了控制器，您可以在 HTML 视图上使用它，如下所示：

<div ng-controller="myCtrl">
  <!-- 在此插入模板和HTML代码 -->
</div>

从控制器向视图传递数据

在控制器中，您可以使用 $scope 对象来传递和操作数据。例如，要将字符串传递到视图中，您可以将 $scope 属性设置为该字符串：

$scope.myMessage = "Hello World";

然后，您可以在 HTML 视图上使用它：

<div ng-controller="myCtrl">
  <span>{{ myMessage }}</span>
</div>

在视图中使用双大括号即可实现数据绑定。

从视图中调用控制器函数

与数据不同，您不能直接从视图中调用控制器函数。相反，您必须在控制器中定义一个将被视图调用的函数，并在视图中使用 AngularJS 指令调用它。

例如，在控制器中定义以下函数：

$scope.sayHello = function() {
  alert('Hello World');
}

然后，您可以在视图中调用此函数：

<div ng-controller="myCtrl">
  <button ng-click="sayHello()">Say hello</button>
</div>

在上面的示例中，ng-click 指令用于调用 $scope.sayHello() 函数。

总结

AngularJS 的控制器是将业务逻辑与视图组件分离的好方法。通过定义控制器函数和属性以及使用 $scope 对象传递数据，您可以轻松地在 AngularJS 项目中管理和控制数据和功能。

以上就是 AngularJS 项目中的控制器以及它的用法。