4.控制器

Posted 2020-10-02 MojoJojo

1.概述

AngularJS 中的控制器是一个函数，用来给视图的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。

当在页面上创建一个新的控制器时，AngularJS 会生成并传递一个新的$scope 给这个controller，可以在这个controller 里初始化$scope。AngularJS会自动实例化controller，我们只需编写构造函数即可。

不建议在全局作用域中创建controller, 否则会污染全局命名空间。合理的做法是创建一个模块，然后在模块中创建控制器。如下所示：

//不建议在全局作用域中创建控制器函数，高版本的AngularJS 已经不能这样使用
//function FirstController($scope){
//    $scope.message="Hello";
//}

//创建一个模块，在模块中创建控制器
var app = angular.module("MyApp",[]);
app.controller("FirstController",function($scope){
    $scope.message="Hello";
});

　　

用内置指令ng-click 可以将按钮、链接等其他元素同点击事件进行绑定。

<div ng-controller="FirstController">
    <h4>The simplest adding machine ever</h4>
    <button ng-clikck="add(1)" class="button"></button>
    <a ng-click="Substract(1)">Substract</a>
    <h4>Current count:{{counter}}</h4>
</div>

<script>
    app.controller("FirstController",function($scope){
        $scope.counter=0;
        $scope.add=function(amount){
            $scope.counter += amount;
        };
        $scope.Substract(amount){
            $scope.counter -= amount;
        };
    });
</script>

用这种方式可以在视图中调用add() 或substract() 方法，这两个方法可以定义在FirstController 的作用域中，或父级$scope 中。

AngularJS 同其他javascript 框架最大的区别是，控制器并不适合用来执行DOM 操作、格式化或数据操作，或者除存储数据模型之外的状态维护操作。它只是视图和$scope 之间的桥梁。设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式。

AngularJS 允许在$scope 上设置包括对象在内的任何类型的数据，并且可以在视图中展示对象的属性。

2.控制器嵌套

即作用域包含作用域，AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对ng-app 所处的层级来讲，它的父级作用域就是$rootScope。

默认情况下，AngularJS 在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果找不到对应的属性，会顺着父级作用域一直向上查找，直到$rootScope 为止。如果在$rootScope中仍找不到，程序会继续运行，但视图无法更新。

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say Hello</a>
    </div>
    {{person}}
</div>

<script>
app.controller("ParentController",function($scope){
    $scope.person = {greeted: false};
});

app.controller("ChildController",function($scope){
    $scope.sayHello=function(){
        $scope.person.name = ‘Jack‘;
    };
});
</script>