Angularjs Scope 原型链

我们知道scope是可以继承的.scope的继承和js原型链是同一个概念。

    <div ng-controller="parentCtrl">        {{name}}       <div ng-controller="childCtrl">           {{name}}       </div>    </div>

在angular中,ng-controller指令会帮我们创建一个scope并继承它的父亲scope .

parentCtrl scope继承自 $rootScope , childCtrl scope 继承自parent scope.

app.controller("parentCtrl", function ($scope,$rootScope) {               $scope.name = "keatkeat";});app.controller("childCtrl", function ($scope) {  });

所以即使我们在childCtrl没有给 name 赋值，模板依然可以从parentCtrl 读取到"keatkeat".

继承对于子层读取父亲属性值非常良好和简单。但是在写就不那么方便了！

比如

app.controller("childCtrl", function ($scope) {    $scope.name = "xinyao";});

当我们在子层填"xinyao"时，你会发现这个值确实在子层的模板出现了，而父亲模板依旧是原来的"keatkeat"

孩子可以覆盖父亲，这也许是我们想要的。

但也有这种情况

app.controller("parentCtrl", function ($scope,$rootScope) {               $scope.name = {        first: "keat",        last: "keat"    }});app.controller("childCtrl", function ($scope) {    $scope.name.first = "xin";    $scope.name.last = "yao";                   });

当父亲的值是个对象时，就要特别小心了。$scope.name.first = "xin"; 会修改掉父亲的值！

所以对于原型链来说，孩子是有"机会"修改掉父亲的值的。

如果你不熟悉js 可能会不太能理解，其实原理是很简单的

你可以把$scope.name.first = "xin"; 看成这样

var obj =$scope.name; //读取name属性,在子层没有，所以会去父层找，并且找到了一个对象

obj.first = "xin"; //你写入的自然是父层的对象咯，所以也就覆盖了父亲啦 .

这其实也挺好的！善加利用的话，孩子可以修改父亲的值也很方便。

那么是不是只有对象才可能这样呢。

如果只是 $scope.name = "keatkeat"; 就不可能被子层修改了吗？

大部分情况是！但是也有例外！

比如

app.controller("parentCtrl", function ($scope, $rootScope) {    var _name = "keatkeat";    Object.definePRoperty($scope, "name", {        get: function () { return _name },        set: function (newValue) { _name = newValue }    });});app.controller("childCtrl", function ($scope) {    $scope.name = "xinyao";});

父亲的name是加了setter的属性, object.defineProperty是ECMA5 的新功能。

一但这样，孩子就无法在添加自己的name属性了，它会直接调用父亲的name做读写！

善加利用的话还是不错的！

总结 : angularjs的scope是单纯的js对象，继承也是单纯的js继承(原型链)，所以呢不要感觉它很神奇很神秘，你要去了解它才能把它发挥出来 ^^