scope 有三个参数 true、false、{}

scope 默认是 false，当 scope设置为true时，会从父作用域继承并创建一个新的作用域对象，

按照true 、false的反向思维，我就理解为scope不设置，或者设置为false的时候，就不从父作用域继承（理解错误主要就是因为这句话）。

这里的不从父作用域继承可以分为两种情况

1、创建一个新的作用域对象，但不继承父作用域  （创建、不继承）

2、压根就不创建新的作用域对象，直接跟父作用域共享一个作用域，也就谈不到继承了。 （不创建、直接用、谈何继承）

弄清楚这个我就明白了，scope:false 和scope：true的本质区别是创不创建新的作用域对象，而不是继不继承的问题。

放几个例子，代码不多，直接写在一个里面了：

指令中的templateUrl共用一个模板：scopeTemplate.html

<p>我的名字是：{{ name }}</p>  <!-- 常量 -->

<p>我的年龄是：{{ age }}</p>   <!-- 变量 -->

<p><button ng-click="greeting()">称呼</button></p>  <!-- 方法 -->

<input type="text" ng-model="name" />

<br /><br />

scope:false (跟父作用域共享一个作用域的时候)

<!DOCTYPE html>

<html ng-app="myapp">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/angular.min.js" ></script>

    </head>

    <body>

        <div ng-controller="myController">

            <p>我的名字是：{{ name }}</p>  <!-- 常量 -->

            <p>我的年龄是：{{ age }}</p>   <!-- 变量 -->

            <p><button ng-click="greeting()">称呼</button></p>  <!-- 方法 -->

            <input type="text" ng-model="name" />

            <br /><br />

            <p>指令1 scope=false：</p>

            <div my-directive></div>

        </div>

    </body>

    <script type="text/javascript">

        var app = angular.module('myapp',[]);

        app.controller('myController',['$scope',function($scope){

            $scope.name = "wanglehui";

            $scope.age = 23;

            $scope.greeting = function(){

                alert('我叫'+$scope.name);

            }

        }])

        /* 指令2 scope==false */

        app.directive('myDirective',[function(){

            return{

                restrict:'AE',

                scope:false,

                templateUrl:'scopeTemplate.html'

            }

        }])

    </script>

</html>

测试的时候注意angularjs的版本问题。

这个很容易理解，两个同时改变，因为用的是同一个作用域，用的是同一个变量。

scope:true (从父作用域继承并创建一个新的作用域对象)

<!DOCTYPE html>

<html ng-app="myapp">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/angular.min.js" ></script>

    </head>

    <body>

        <div ng-controller="myController">

            <p>我的名字是：{{ name }}</p>  <!-- 常量 -->

            <p>我的年龄是：{{ age }}</p>   <!-- 变量 -->

            <p><button ng-click="greeting()">称呼</button></p>  <!-- 方法 -->

            <input type="text" ng-model="name" />

            <br /><br />

            <p>指令1 scope=true：</p>

            <div my-directive></div>

        </div>

    </body>

    <script type="text/javascript">

        var app = angular.module('myapp',[]);

        app.controller('myController',['$scope',function($scope){

            $scope.name = "wanglehui";

            $scope.age = 23;

            $scope.greeting = function(){

                alert('我叫'+$scope.name);

            }

        }])

        /* 指令2 scope==true */

        app.directive('myDirective',[function(){

            return{

                restrict:'AE',

                scope:true,

                templateUrl:'scopeTemplate.html'

            }

        }])

    </script>

</html>

这块有一点需要注意下，

刷新——>输入第一个，第二个会跟着变——>输入第二个，第一个不变——>再输入第一个，第二个也不变了（之后两个互不影响）

刷新——>输入第二个，第一个不变——>输入第一个，第二个不变（之后两个互不影响）

也就是说，如果我们不在第二个输入框输入，也就不会在指令新建的作用域对象中创建新的变量，它每次显示的就是在父作用域中查询到的值

一旦输入，就已经在该对象下新建了一个变量。（这块跟js变量作用域的查找是一样的）

再看第三个 scope：{}

书上说这块叫隔离作用域，隔离.....也就是我是一个新的个体，跟外界没关系

前面说 scope:false 和scope：true的 本质区别是创不创建新的作用域对象，而不是继不继承的问题。

那么这里scope：{}和scope：true的 本质区别是继不继承父作用域的问题，而不是创不创建新的作用域对象的问题。


scope:{} (创建一个新的作用域对象，但不继承父作用域)

<!DOCTYPE html>

<html ng-app="myapp">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/angular.min.js" ></script>

    </head>

    <body>

        <div ng-controller="myController">

            <p>我的名字是：{{ name }}</p>  <!-- 常量 -->

            <p>我的年龄是：{{ age }}</p>   <!-- 变量 -->

            <p><button ng-click="greeting()">称呼</button></p>  <!-- 方法 -->

            <input type="text" ng-model="name" />

            <br /><br />

            <p>指令 scope={}：</p>

            <div my-directive></div>

        </div>

    </body>

    <script type="text/javascript">

        var app = angular.module('myapp',[]);

        app.controller('myController',['$scope',function($scope){

            $scope.name = "wanglehui";

            $scope.age = 23;

            $scope.greeting = function(){

                alert('我叫'+$scope.name);

            }

        }])

        /* 指令2 scope==true */

        app.directive('myDirective',[function(){

            return{

                restrict:'AE',

                scope:{},

                templateUrl:'scopeTemplate.html'

            }

        }])

    </script>

</html>

如果想要scope{}中的变量与父作用域绑定, 就会用到angularjs中的绑定策略“@”，“=”，“&”

 

angularjs指令中scope参数 true、false、{} 的区别详解的更多相关文章

  1. JS中escape()、encodeURI()、encodeURIComponent()区别详解

    avaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decode ...

  2. AngularJS 指令中的 replace:true

    默认值是fasle,模板会被当作子元素插入到调用此指令的元素内部. <my-directive></my-directive> myModule.directive(" ...

  3. Batch批处理中的 参数 路径和字符串 处理详解

    1.截取字符串 截取字符串可以说是字符串处理功能中最常用的一个子功能了,能够实现截取字符串中的特定位置的一个或多个字符.举例说明其基本功能: @echo off set ifo=abcdefghijk ...

  4. 【转】 深入main函数中的参数argc,argv的使用详解

    C/C++语言中的main函数,经常带有参数argc,argv,如下: 复制代码 代码如下: int main(int argc, char** argv) 这两个参数的作用是什么呢?argc 是指命 ...

  5. JQuery中$.each 和$(selector).each()的区别详解

    PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...

  6. php中const与define的使用区别 详解

    1.const用于类成员变量定义,一旦定义且不能改变其值.define定义全局常量,在任何地方都可以访问. 2.define不能在类中定义而const可以. 3.const不能在条件语句中定义常量 i ...

  7. jsp中的@include与jsp:include区别详解

    1 前言 搞java开发的人也许都知道在jsp中引入项目中其他文件有如下两种方式 <%@include file="xxx.jsp"%> <jsp:include ...

  8. java中==和equals和hashcode的区别详解

    一.相同点 都是用来进行值或对象的比较. 二.不同点 对于“==”而言,对于基本类型(char,byte,short,int,long,float,double,boolean),对比的是值,所以是相 ...

  9. css中postion的fixed与absolute区别详解

    fixed:固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px) absolute:绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先 ...

随机推荐

  1. php 7.1 openssl_decrypt() 代替 mcrypt_module_open() 方法

    公司开发微信第三方平台,之前用着一直是没有问题的.后来服务器到期进行项目搬迁就怎么也接收不到微信每10分钟的ticketle. 经过调试发现php版本由原来的7.0升到了7.1(该死....为什么没人 ...

  2. HMM模型学习笔记（前向算法实例）

    HMM算法想必大家已经听说了好多次了,完全看公式一头雾水.但是HMM的基本理论其实很简单.因为HMM是马尔科夫链中的一种,只是它的状态不能直接被观察到,但是可以通过观察向量间接的反映出来,即每一个观察 ...

  3. ubuntu 环境 celery配置全解

    继续尝试没有时间弄明白的技术. celery官方文档地址:http://docs.celeryproject.org/en/stable/getting-started/introduction.ht ...

  4. Conjugate Function

    共轭函数 共轭函数的定义: 设函数f:Rn→R,定义函数f∗:Rn→R为: f∗(y)=sup(<y,x>−f(x))  x∈D 此函数称为函数f的共轭函数.即函数yx和函数f(x)之间差 ...

  5. BZOJ3832[Poi2014]Rally——权值线段树+拓扑排序

    题目描述 An annual bicycle rally will soon begin in Byteburg. The bikers of Byteburg are natural long di ...

  6. 小程序源码下载[demo整理自github]

    微信小程序的火热程度大家都有所了解,也有很多牛人写了不错的小程序,今天ytkah就整理一些github上的小程序开源项目,源码可以直接下载来用,感兴趣的朋友赶紧去看看吧!以下小程序排名按star的数量 ...

  7. Java中子类和父类相关方法的执行顺序

    无意中看到下面一个题目,大家一起来看看最后的输出结果是什么.反正我看完之后,用IDE测试后感觉知识点得到巩固了. /** * 函数执行顺序测试 * Created by 萌小Q on 2017/5/1 ...

  8. bat 脚本处理windows 文件

    背景:以下脚本使用了导出文件列表.移动文件.复制文件.report 系统信息.分段执行的功能 主要针对在从事于Easeware公司中,对软件Bug中,所需文件的提取. 代码片段说明: cls ver ...

  9. break、continue区别

    break命令break命令允许跳出所有循环(终止执行后面的所有循环).下面的例子中,脚本进入死循环直至用户输入数字大于5.要跳出这个循环,返回到shell提示符下,就要使用break命令.1. #! ...

  10. Spring Cloud(三) --- hystrix

    Hystrix 说到Hystrix就得先说一下产生的背景等等,那就是雪崩效应. 在微服务中肯定存在多个服务层之间的调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服 ...