AngularJS 控制器

AngularJS 控制器是 AngularJS 中的一个重要概念，用于控制应用程序的逻辑。控制器被用来管理 JavaScript 对象和视图模型之间的交互。控制器通过 $scope 对象实现，它是一个连接视图和控制器的桥梁，用于在视图模板中访问应用程序逻辑。控制器使用 JavaScript 函数来定义应用程序，它可以定义变量、函数和行为，以及表达式和指令等等。

控制器的定义方式如下：

var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});

上面的例子中，我们定义了一个叫做 myCtrl 的控制器，该控制器通过 app.controller() 方法来创建。该方法需要两个参数，第一个参数是控制器的名称，第二个参数是函数，用于定义具体的控制器逻辑。函数的第一个参数 $scope 是控制器的关键，它是应用程序中的一个 JS 对象，用于将数据从控制器传递到视图。

控制器的作用域是非常重要的，它定义了控制器的作用范围。默认情况下，控制器的作用域为全局，在整个应用程序中都可以访问。这时，你需要小心控制器名称的命名，避免与其他控制器命名冲突。为了更加安全和有序，可以在控制器的声明中使用作用域名称的方式来定义作用域：

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

app.controller("myCtrl2", function($scope) {
  $scope.firstName = "Bob";
})

在上面的代码中，我们定义了两个控制器，分别为 myCtrl 和 myCtrl2。每个控制器都有自己的 $scope 对象，因此可以在不同的控制器中定义相同的变量名称，而不需要担心命名冲突的问题。

控制器还支持指令的使用，指令是在 HTML 元素上定义的特殊属性，它们扩展了 HTML 的语法。指令可以用来创建新的 HTML 元素，或者扩展现有的 HTML 元素。在控制器中，可以使用指令来处理 DOM 元素的逻辑。例如：

app.directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.html('You clicked me!');
            });
        }
    };
});

上述代码中，我们定义了一个 myDirective 指令，并在其中使用 link 函数来绑定 DOM 元素的 click 事件。当用户点击该元素时，它将显示一条消息。

AngularJS 控制器是构建网络应用程序的一个重要工具，可以使我们更轻松地管理 JavaScript 对象和视图模型之间的交互。通过掌握它的使用方法，可以帮助我们更好地构建高质量的应用程序。