Angularjs Scope 原型链

标签：style   blog   color   io   ar   div   sp   cti   log   

我们知道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继承(原型链)，所以呢不要感觉它很神奇很神秘，你要去了解它才能把它发挥出来 ^^ 

Angularjs Scope 原型链

标签：style   blog   color   io   ar   div   sp   cti   log   

原文地址：http://www.cnblogs.com/keatkeat/p/3983952.html