一、概念说明

　　可以是true、 false 、哈希对象 {}

　　1、true

　　　　新创建了一个作用域，且继承了父作用域；在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

　　2、false 默认（不指定时候 ）

　　　　创建的指令和父作用域（其实是同一个作用域）共享同一个model模型，在指令中修改模型数据，会反映到父作用域的模型中。

　　3、{}

　　　　新创建了一个作用域，不继承继承了父作用域。表示一个独立的作用域 isolated

　　　　例子：

　　　　scope :

　　　　{

　　　　　　name:'@',//结果就是test

　　　　　　detail:'=', //结果要通过$scope.detail计算

　　　　　　onUpdate:'&'//绑定一个事件

　　　　}

　　　　<user-details name ='test' detail='detail', on-update='updateIt(times)'></user-details>

 二、例子

1、scope: false（或不写即默认false）

　　不产生新作用域，指令的作用域和父作用域是同一个对象

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            <my-directive></my-directive>

            <my-directive></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        　　　　$scope.name = '2222';

            })

            .directive("myDirective",function(){

                return {

                    restrict:'AE',

                    scope: false,//或不写即默认false,指令的作用域和父作用域是同一个对象

                    template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'

                };

            });

        </script>

</body>

</html>

　　运行结果 ：

　　分析：一个输入改变，四个位置的内容一起改变。

　　作用域分析：ng-app产生rootScope,ng-controller指令产生一个作用域scope,两个指令myDirective，由于scope: false（或不写即默认false）,指令的作用域和父作用域是同一个对象。一共4个作用域。

　　所以，name在一个地方变了，就所有地方变。

2、scope: true

　　产生新作用域，而且继承父作用域属性和方法。两个指令作用域互相对立，而且都继承自父作用域（ng-controller产生）。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            <my-directive></my-directive>

            <my-directive></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        $scope.name = '2222';

            })

            .directive("myDirective",function(){

                return {

                    restrict:'AE',

                    scope: true,

                    template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'

                };

            });

        </script>

</body>

</html>

　　运行结果;

　　

　　两行数据立变化，即每个指令作用域互相独立，且继承父作用域。

3、scope: {}

　　产生独立新作用域，而且父作用域无关。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            <my-directive></my-directive>

            <my-directive></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        $scope.name = '2222';

            })

            .directive("myDirective",function(){

                return {

                    restrict:'AE',

                    scope: {},

                    template:'<div><input type="text" ng-model="name"/>{{name}}</div><br>'

                };

            });

        </script>

</body>

</html>

　　运行结果，刚开始运行，都是空，因为，没有继承父作用域的name

　　

　　输入一个输入框后，只跟指令内的作用域同步

　　

　　输入另一个，两个指令间不互相影响

　　

4、{}中的@

　　字符串绑定，即，把内容直接当做字符串输出，但是{{str2}}（<my-directive content="{{str2}}"></my-directive>），还是会解析成字符串再输出。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            <my-directive content="test string"></my-directive>

            <my-directive content="{{str2}}"></my-directive>

        　　<my-directive content="test()"></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        　　　　  $scope.str1 = "hello";

                $scope.str2 = "world";

                $scope.str3 = "angular";

            })

            .directive("myDirective",function(){

                return {

                    restrict:'AE',

                    scope: {

            　　　　content:'@'

            },

                    template:'<div>{{content}}</div>'

                };

            });

        </script>

</body>

</html>

　　运行结果：

　

　　第一个和第三个都是字符串原样输出，第二个会解析后输出。

5、{}中=

　　变量绑定

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            ctrl:<input type="text" ng-model="testname"><br>

            directive:<my-directive name="testname"></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        　　　　$scope.testname="my name is hyx";

            })

            .directive("myDirective",function(){

                return {

                   restrict:'AE',

                    scope:{

                        name:'='

                    },

                    template:'<input type="text" ng-model="name">',

                    repalce:true

                };

            });

        </script>

</body>

</html>

　　解析过程：

　　（1 ）、在控制器MyController对应的div中，定义了一个变量ng-model —— testname。

　　（2）、 testname对应的是输入框中输入的值。

　　（3 ）、然后把这个变量当做一个参数传递给my-directive这个标签的name属性。

　　（4）、 在my-directive标签中，又把这个name绑定到模板中的一个输入框内。

　　最终两个输入框的内容被连接起来，无论改变哪一个输入框内的值，testname与name都会发生改变。即通过my-directive标签内的属性依赖关系把 testname与name连接在一起，

6、{}中的&

　　方法绑定，当做方法执行，sayHello,sayNo,参数动态绑定到输入框。

<!DOCTYPE html>

<html ng-app="myApp">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

   <div ng-controller="MyController">

            <my-directive say="sayHello(name)"></my-directive>

        <my-directive say="sayNo(name)"></my-directive>

        </div>

        <script type="text/javascript">

            var myAppModule = angular.module("myApp",[]);

            myAppModule

            .controller('MyController', function($scope){

        　　　　  $scope.sayHello = function(name){

                    console.log("hello !"+ name);

                };

                $scope.sayNo = function(name){

                    console.log("no !"+ name);

                };

            })

            .directive("myDirective",function(){

                return {

                   restrict:'AE',

                    scope:{

                        say:'&'

                    },

                     template:'<input type="text" ng-model="username"/><br>'+

                        '<button ng-click="say({name:username})">click</button><br>',

                    repalce:true

                };

            });

        </script>

</body>

</html>

　　通过say在scope中的定义，angular知道了say对应的是个方法。

　　通过{name:username}的关联，知道了传入的是username。

AngularJs 指令中 的Scope属性的更多相关文章

  1. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  2. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  3. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  4. AngularJS自定义指令directive：scope属性 （转载）

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  5. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  6. angularjs指令中的compile与link函数详解（转）

    http://www.jb51.net/article/58229.htm 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link, ...

  7. angularjs指令中的compile与link函数详解补充

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你 ...

  8. AngularJs -- 指令中使用子作用域

    下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app和ng-controller是特殊的指令,因为它们 ...

  9. AngularJS 指令中的require

    require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字.require会将控制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数.字符串或数组元素的值是会在当前指令的作 ...

随机推荐

  1. Nginx 如何设置反向代理

    网络结构如上图.可能你只有一个公网的Ip地址. 但是您的内网有个网站需要映射至外网.而又不想添加其它的非80端口.则你可以直接使用nginx来做反向代理即可.首先,配置nginx.conf文件. ht ...

  2. java 环境搭建

    一.安装jdk 下载jdk http://www.oracle.com/technetwork/java/javase/downloads 将下载的jdk文件放到 /opt 下解压 $sudo cp ...

  3. [Robot Framework] 怎么做数学运算？

    运用BuiltIn里面的Set Variable

  4. cpp 区块链模拟示例(七) 补充 Merkle树

    Merkle 树 完整的比特币数据库(也就是区块链)需要超过 140 Gb 的磁盘空间.因为比特币的去中心化特性,网络中的每个节点必须是独立,自给自足的,也就是每个节点必须存储一个区块链的完整副本.随 ...

  5. mysql 5.7.10 下互为主备配置

    mysql安装方法这里就不在介绍,网上有很多教程 环境介绍: A主机: win2008_x64+mysql5.7.10 64位,ip192.168.7.180 B主机: win2008_x64+mys ...

  6. On the internet, nobody known you are a dog !

  7. 类似 QQ 音乐底部常驻播放栏（AVQueuePlayer）

    一开始搞了个基类,但是这样所有类都要继承它才可以.后来考虑把他加到 window 上.但是在 appdelegate 中没有办法可以加到上面,最后在 keyWindow 的rootViewContro ...

  8. ssh设置无密码登录

    设置无密码登录此处设为有主机a登录到主机b 1.在主机a生成公钥 ssh-keygen -t rsa  之后有导航(其实一直回车就可以) 2.此时在主机a/home/YOURHOSTNAME/.ssh ...

  9. 2018.11.09 codeforces487E. Tourists（tarjan+树链剖分）

    传送门 先把边双连通分量用圆方树一样的方法缩点,然后把新建的树树剖维护. 注意对于边双连通分量需要维护动态最小值,可以用multisetmultisetmultiset. 代码: #include&l ...

  10. 2018.11.06 NOIP训练 最大获利（profit）（01分数规划+最大权闭合子图）

    传送门 好题啊. ∑i<jpi,jK∗(200−K)>X\frac{\sum_{i<j}p_{i,j}}{K*(200-K)}>XK∗(200−K)∑i<j​pi,j​​ ...