Angular中的控制器

控制器在Angular中占有重要的地位，它是组成前端MVC框架的一员。在Angular中，控制器的作用是管理页面的逻辑代码。当控制器通过"ng-controller"指令添加到DOM页面时，Angular将会通过控制器构造函数生成一个实体的对象，而在生成这个对象的过程中，$scope对象作为参数注入其中，并允许用户访问$scope对象。这样一来，用户可以通过$scope对象与页面中的元素进行数据绑定，从而实现数据从控制器到视图层的过程。

1.1控制器初始化$scope对象

例：页面中，以应用模块的方式构建一个控制器对象，并以内联声明方式表明控制器对象依赖于$scope对象提供的服务。在控制器对象中，初始化$scope对象的名为"text"的属性并与页面的元素进行数据绑定

    
    


控制器初始化$scope对象

    {{text}}

1.2 添加$scope对象方法

除了可以通过初始化的方式为$scope对象添加属性之外，还可以为$scope对象添加方法，并依靠这些定义的方法来满足视图层中逻辑处理和事件执行的需求。在添加完$scope对象的方法函数之后，在视图层中，就可以像绑定属性一样，通过表达式的方式绑定这些函数，处理业务逻辑需求，也可以通过Angular的事件处理器，将执行的事件（如ng-click）绑定给这些函数，用来实现事件触发时需要完成的功能需求。

例2：在例1的基础上向$scope对象添加一个名为"span_show"的方法函数。在该函数中，先重置$scope对象的"text"属性值，并通过return方法返回重置后的内容值；在页面中，通过Angular表达式绑定$scope对象中的"span_show"函数，显示重置后返回的内容。

    {{span_show()}}

1.2.2 添加带参数的$scope方法

例4：在例3的基础上再向控制器中添加一个名为"click_para"的带参数方法，并再页面中添加一个元素，并将新添方法与元素的"ng-click"事件绑定，这样当单击该元素时，在元素中显示被绑定方法的参数内容。

    {{text}}
    

显示 带参数

1.2.3 $scope对象属性和方法的继承

继承，顾名思义，指的是一种层次级间的延续关系。由于页面本身就是一个具有层次性的DOM结构模型，而Angular中的"ng-controller"指令也允许在不同的层次元素中指定控制器。因此，处于子层控制器中的$scope对象将会自动继承父层控制器中$scope对象的属性和方法

例5：在页面中添加两个具有包含关系的

元素，在父级

的控制器中添加属性和方法，而将这些属性和方法与子级

中的元素相绑定，在子级

的元素中显示属性内容，在单击按钮时调用父级控制器中添加的方法。

    

        {{text}}

        {{child_text}}
        

继承