angular指令中的scope的详解

scope参数值

scope参数是可选的,默认值为false,可选true、对象{};

    false:共享父域
    true:继承父域,且新建独立作用域
    对象{}:不继承父域,且新建独立作用域

scope参数false

本质:子域与父域共享作用域。
特点:父域修改parentName的同时,指令绑定的parentName的元素会被刷新。
反之,指令内部parentName被修改时,父域的parentName同样会被刷新。

scope参数true

本质:子域继承父域,并建立独立作用域。
特点:

1、在指令已声明parentName的情况下,父域parentName变更,指令中parentName不会发生变化。指令在true参数下,建立了的scope,独立并隔离与父控制器的scope。反之,指令中parentName变更,父域也不会发生变化。

2、在指令未声明parentName的情况下,父域的parentName变更,指令中parentName也会刷新这种情况很多时候会被忽略,指令的scope没有声明对象时,其元素绑定的仍然是父域的对象。但,一旦指令中Input变更了,对应的独立scope也会自动声明该绑定对象,这就回到了第1种情况。然而,指令中parentName变更,父域是不会变化的;

3、在指令已声明parentName的情况下,在指令中监听父域parentName的变化无效。但监听子域parentName的变化有效独立子域scope,只能监听自己的,不能监听父域的。但通过 $scope.$parent可以监听父域。

4、在指令未声明parentName的情况下 ,在指令中监听父域parentName的变化有效。

scope参数{}

本质:子域不继承父域,并建立独立作用域。
特点:

1、当scope对象为空对象时,无论是父域parentName,还是指令子域parentName发生变更,都不会影响到对方。
原理很清楚,就是指令建立的独立作用域,与父域是完全隔离的。

2、当scope对象为非空对象时,指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务,就是可以通过这块扩展属性完成
    @:符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。@ 是单向绑定本地作用域
    =:可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。
    &:符号可以对父级作用域进行绑定,以便在其中运行函数,&对应的attrName必须以on-开头
        <child-c on-say="say('i m ' + name)"></child-c>
        
        scope: {          
             onSay: '&',
        }
        
        app.controller('parentCtrl', function ($scope) {
             $scope.say = function (sth) {
                 alert(sth);
             };
        })
posted @ 2017-08-23 11:36  天空中翱翔的鱼  阅读(1219)  评论(0)    收藏  举报