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. GIL全局解释器锁+GIL全局解释器锁vs互斥锁+定时器+线程queue+进程池与线程池（同步与异步）

    以多线程为例写个互斥锁 from threading import Thread ,Lockimport timemutex = Lock() n = 100 def task(): global n ...

  2. 《微信小程序组件》收集

    https://github.com/liuqian0413/wxappUI https://github.com/liujians/Wa-UI

  3. unorder_map 自定义KEY

    1. boost::unorder_map 实现自定义KEY // boostLibTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" ...

  4. BZOJ4372 烁烁的游戏（动态点分治+线段树）

    建出点分树,每个节点维护其作为点分树上lca对子树内点的贡献,线段树维护即可,同时另开一个线段树以减掉父亲重复的贡献. #include<iostream> #include<cst ...

  5. MT【49】四次函数求最值

    已知$f(x)=(1-x^2)(x^2+ax+b)$的图像关于x=3对称,求$f(x)$的最大值. 解答:显然$-1,7;1,5$是$f(x)=0$的根.故$(x^2+ax+b)=(x-5)(x-7) ...

  6. centos Install Docker

    安装必备软件 $ yum -y install iptables iptables-services net-tools vim wget $ wget -P ~ https://github.com ...

  7. 【BZOJ4813】[CQOI2017]小Q的棋盘（贪心）

    [BZOJ4813][CQOI2017]小Q的棋盘(贪心) 题面 BZOJ 洛谷 题解 果然是老年选手了,这种题都不会做了.... 先想想一个点如果被访问过只有两种情况,第一种是进入了这个点所在的子树 ...

  8. onTouchEvent方法的使用

    手机屏幕事件的处理方法onTouchEvent.该方法在View类中的定义,并且所有的View子类全部重写了该方法,应用程序可以通过该方法处理手机屏幕的触摸事件.该方法的签名如下所示. public  ...

  9. HDU 1024 Max Sum Plus Plus （动态规划）

    HDU 1024 Max Sum Plus Plus (动态规划) Description Now I think you have got an AC in Ignatius.L's "M ...

  10. 【洛谷P2746】Network of Schools

    题目大意:给定一个 N 个点,M 条边的有向图,第一问求至少从多少个点出发才能遍历整个有向图,第二问求至少在这个有向图的基础上加多少条边才能使得该无向图强连通. 题解:先进行 Tarjan 缩点,得到 ...