controller as引入的意义和方法?

2017-12-04 本文已影响95人自娱自楽

在Angular中，有几种不同的方式来声明和使用控制器。

在最开始的时候我们对于angular在view上的绑定都必须使用直接的scope对象，对于controller来说我们也得必须注入$scope这个service。

angular从1.2版本开始带来了新语法Controller as。

它使我们不需要把$scope作为依赖项。简洁了controller，同时我们可以使用this在控制器上直接添加我们想要的任何属性。

$scope和this是什么?

引入controller as之前的写法

引入controller a's之后的写法

类比一下js中的构造函数和实例:

用new方法给myClass()一个实例对象，我们可以在这个实例中访问myClass()中的属性和方法；

app.controller('MainCtrl',function(){})就是在定义一个名称为MainCtrl的构造函数，MainCtrl as main就是在实例化，生成MainCtrl的实例main，然后就可以在main中访问MainCtrl里定义的变量和函数

这样类比的话，scope对象类似于构造函数的原型对象，this则是指当前实例对象

controller as有哪些优点

1、controller as让继承关系的变量之间更清晰可读

使用controller as后，在视图嵌套中双向绑定的数据所属清晰可见，不会出现分不清哪个是哪个的问题；

2、controller as 方式解决了父子$scope带来的混乱

直接使用$scope会产生父变字变，子变父不变的现象。当一个对象的原型链上有属性foo，你再给这个对象赋上一个属性foo，它不会改变原型链上的属性foo。只是新建的一个foo，在原型链的更近端，访问这个属性时不会在去寻找更远处的foo属性。

使用controller as方式可以避免上面的混乱，让关系更清晰：

controller as有哪些应用方式？

1、在view视图中定义

2、在路由配置中定义

对象__proto__属性的值就是它所对应的原型对象；

controller as的实质是什么？

controller as的实质是一种语法糖，我们可以看一下angular源码：

从上面的代码我们能看见的是：angular只是把controller这个对象实例以其as的别名在scope上创建了一个新的对象属性。

等价于

参考文献：

AngularJS Controller As Syntax：

vm是什么？

vm是“view model”，controller函数实例的统称。

为什么在controller中不直接用this，而要用vm等代指this？

为了避免this指向的混乱

controller as有缺点吗？

使用controller as并不能提升整体性能，只是对我们简洁代码的一种规定，因为没有了$scope，而controller实例将会成为scope上的一个属性，所以在controller中不能使用$watch,$emit,$on之类的特殊方法，因为这些东西往往不该出现在controller中的。