发表于: 2017-06-27 21:54:07

2 869


这几天做样式,发现了几个新坑。

<a><h1>这俩标签的字体颜色都不能被继承!!!

老看大家用VM作为变量名然后就去了解了一番:

Vm指的是View Model

历史原因

controller as 是1.2之后才有,和 $scope 作用其实一样,哪怕你混合着用也是没有问题,但这样看起来非常的奇怪。

模板作用域

当然,不光如此,不然还要造个 controller as 做什么,是吧!

这是因为早先 $scope 对于子组件默认继承父组件的数据,但又不会被覆盖,而反之又是隔离的,例如:

function ParentCtrl($scope) {

    $scope.name = 'asdf';

    $scope.age = 25;

}

function ChildCtrl($scope) {

    $scope.age = 26;

}

<div ng-controller="ParentCtrl">

    <p>name:{{name}},age:{{age}}</p>

    <div ng-controller="ChildCtrl">

        <p>child name:{{name}},age:{{age}}</p>

    </div>

</div>

ChildCtrl 并没有定义 name,但依然可以显示:asdf。这就是继承关系,通过这种方式来访问一些变量很不可靠,或者说并不直观。所以,才有 controller as。

<div ng-controller="ParentCtrl as p">

    <p>name:{{p.name}},age:{{p.age}}</p>

    <div ng-controller="ChildCtrl as c">

        <p>child name:{{p.name}},age:{{c.age}}</p>

    </div>

</div>

这样的写法不是更明了,直观了吗?

控制器 $scope !== this

先理解模板,那再看这一条就明了许多。

为了不让 $scope 默认继承父组件的内容,因此需要使用 this 让这些东西不再和子组件有瓜葛。

function ChildCtrl($scope) {

    var vm = this;

    console.log(vm === $scope) // false;

}

this 与 $scope 完全不一样,前者就是明确表示控制组实例,而后者是一个比较奇特的this怪咖。

最后关于 var vm = this愿意叫一个 var funkScopeTenThousandsYear = this 也行。

来自 <https://segmentfault.com/q/1010000008883278> 

还看了mock的东西。不过还不则么熟练。

问题:三个人写前端。SVN合并日常会炸一波!

明天昨啥:这几天进度感觉是真的正常了起来。


返回列表 返回列表
评论

    分享到