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. centos7黑客帝国装逼

    黑客帝国既视感 搜 cmatrix 然后放到本地解压缩 ,安装 yum install ncurses-devel./configure && make && make ...

  2. git 快捷键

    实际上就是弄了个别名 $ git config --global alias.st status $ git config --global alias.ci commit $ git config ...

  3. Golang的位运算操作符的使用

    & 位运算 AND | 位运算 OR ^ 位运算 XOR &^ 位清空 (AND NOT) << 左移 >> 右移 感觉位运算操作符虽然在平时用得并不多,但是在 ...

  4. 《ERP系统原理与实施》

    第一 采购 第二 生产(生产任务->生产准备->加工单->派工单->生产调度->生产监控->数据采集->统计分析) 第三 仓储 第四 质量 第五 财务 第六 ...

  5. PHP5.5特性

    1.PHP生成器(使用yield关键字) <?php //使用yield关键字实现平方的生成器,在循环结构中则生成的是数组 function do2pos($n){ for($i=1; $i&l ...

  6. C#實現XML的增刪查改

    命名空間:using System.Xml; 1.查找某個節點是否存在: private XmlDocument xmldoc; private string mod="1"; p ...

  7. 一本通1601【例 5】Banknotes

    1601:[例 5]Banknotes 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:POI 2005 Byteotian Bit Bank (B ...

  8. java常见面试题及答案

    java常见面试题及答案 来源 https://blog.csdn.net/hsk256/article/details/49052293 来源 https://blog.csdn.net/hsk25 ...

  9. cygwin jdk11u

    cygwin jdk11u 安装 Cygwin64 下载地址 https://cygwin.com/setup-x86_64.exe Cygwin 国内源    中科大镜像源 http://mirro ...

  10. centos Install Docker

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