AngularJs—控制器 <controller>

最新推荐文章于 2020-01-18 16:15:47 发布

石头_666

最新推荐文章于 2020-01-18 16:15:47 发布

阅读量1.4k

点赞数

分类专栏： AngularJS 文章标签： angularjs controller 控制器

本文链接：https://blog.youkuaiyun.com/qq_14992199/article/details/70877930

版权

AngularJS 专栏收录该内容

7 篇文章

订阅专栏

控制器

什么是控制器：

控制器是angularjs的核心之一，它的作用主要是对师徒中的数据和事件处理函数进行挂载，同时进行一定的业务功能的底层封装和处理。

var app = angular.module(“myApp”, []);
  app.controller(“myCtrl”, function($scope) {
     // 控制器函数操作部分
     // 控制器主要进行数据的初始化操作和事件函数
  的定义
});

目前控制器的做法：

先声明模块

模块下挂载控制器→控制器的作用范围仅限于当前模块→局部控制器

Angular1.2版本以前
控制器的定义，是直接通过全局函数来实现的。

   //控制器：全局控制器
       function ctrl($scope){
       $scope.name="tom"//挂载数据
   }

全局控制器的意思，是可以在网页中任意地方通过ng-controller进行注册
全局控制器造成了全局数据污染~！所以Angular在1.2版本以后进行了彻底修改
废弃了全局控制器~ 而是提倡使用挂载在模块下的局部控制器！来更好的控制数据！

控制器在AngularJS中的作用：

1、通过$scope进行数据状态的初始化操作

2、通过$scope进行事件处理函数的挂载操作

控制器使用注意事项：

不要用控制器做下面的事情：

1、ＤＯＭ操作：使用AngularJs中的数据双向绑定和自定义指令执行操作

2、表单处理：使用Angular中的form controls进行操作

3、数据格式化展示：使用Angular中的过滤器Filter来进行操作

4、不同控制器之间的数据共享：使用Angular中的自定义服务Service进行处理

组件声明周期的操作：

使用Angular中的自定义服务Service进行处理

参考代码如下：

   var app = angular.module(“myApp”, []);
     app.controller(“myCtrl”, function($scope) {
      // 控制器函数操作部分
     // 控制器主要进行数据的初始化操作和事件函数的定义
   });

$scope作用域：

$scope作为控制器函数一个非常重要的参数，AngularJS通过依赖注入的方式进行自动赋值，挂载数据完成控制器中的数据处理。每个$scope都拥有自己控制器的作用域，并且都独立于当前的控制器。

$scope挂载变量：

通过控制器函数中的$scope参数，直接将JS变量添加到$scope对象上。

      $scope.name = “jerry”;

这里name是变量名称，jerry是变量值；变量值可以是字面量直接赋值，也可以是后端接口获取数据之后进行赋值。

$scope挂载事件处理函数：

通过Angular的事件指令，在指定的DOM元素上挂载事件，然后在$scope作用域对象上挂载事件处理函数，完成事件的完整流程操作。

    <div ng-click=”clickMe()”>点击我</div>
    $scope.clickMe = function() {..}

补充：可以通过$event来传递一个事件对象，方便在Angular中通过事件对象进行后续更多功能的操作。

 <div ng-click=”clickMe($event)”>点击我</div>

$scope作用域范围：

$scope上挂载的数据，和控制器controller进行了绑定；控制器controller和网页上的DOM元素进行了绑定，网页中DOM元素的开始标签和结束标签范围，就是控制器的作用范围，也是$scope上挂载的数据的作用范围.

$watch:

$watch()是$scope对象的一个函数，该概述用于在代码执行的过程中对变量的数据进行监听，一旦变量的内容发生变动就执行对应的函数操作。

1、如果是单个监听变量，可直接写变量名字；

  $scope.price = 12;
  $scope.$watch(“x”, function() { // TODO; })

2、如果是多个变量，变量之间用+连接：

   $scope.price = 12;
   $scope.count = 1;
   $scope.$watch(“price + count”, function() { //   TODO; });

3、如果监听的是数组集合内部的数据，需要使用$watchCollection(....)进行监听

4、如果监听的是对象内部的属性数据，需要将$watch()的第三个参数设置为true

全局控制器和局部控制器

AngularJS1.2版本之前，AngularJS中定义控制器，是直接定义成window全局函数进行处理的，这样的控制器可以被所有的模块共用，称为全局控制器；这样的处理模式的优点是编写方便，处理流程清晰；缺点是容易造成变量和函数的全局污染。所以AngularJS在1.2版本之后，进行了优化调整，废弃了全局控制器，而是将控制器注册在模块中，成为模块中的局部控制器存在，局部控制器也就相当于限定了控制器的作用域范围。