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. fullstack

    fullstack https://www.fullstack.io/ https://www.fullstack.io/write-a-book https://github.com/fullsta ...

  2. python之使用smtplib模块发送邮件

    # 使用smtplib模块发送邮件 import smtplib from email.mime.text import MIMEText from email.header import Heade ...

  3. windows 下编程实现打印日志

    下面是在windows下编程实现的日志打印,写的比较简单,可以根据实际情况进行修改使用. 宏WRITELOG在vs2013可以正常使用. 在vs2003和vs2010可能会报错,可以直接使用myLog ...

  4. docker--Dockerfile--sonarqube

    FROM openjdk:8 ENV SONAR_VERSION=6.7.1 \ SONARQUBE_HOME=/opt/sonarqube \ # Database configuration # ...

  5. AC自动机-HDU3065-简单题

    http://acm.hdu.edu.cn/showproblem.php?pid=3065 需要记录匹配情况的AC自动机,没有清空一些数组导致wa了几发. /*------------------- ...

  6. ubuntu 16.04 samba服务搭建

    一:安装 1. sudo apt-get install samba 有询问Yes的地方Yes就行. 无法安装samba 执行 sudo apt-get update 2.等待安装完成,进入配置文件目 ...

  7. java访问权限表

    private(私有的) 默认的(什么都不写) protected(受保护的) public(公共的 ) 同一个类中 yes   yes yes   yes 同一个包中不同类之间 no yes yes ...

  8. Leetcode 28.实现strStr() By Python

    实现 strStr() 函数. 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在,则返 ...

  9. 牛客练习赛 小A与任务 解题报告

    小A与任务 链接: https://ac.nowcoder.com/acm/contest/369/B 来源:牛客网 题目描述 小A手头有 \(n\) 份任务,他可以以任意顺序完成这些任务,只有完成当 ...

  10. [HAOI2015]按位或（min-max容斥，FWT，FMT）

    题目链接:洛谷 题目大意:给定正整数 $n$.一开始有一个数字 $0$,然后每一秒,都有 $p_i$ 的概率获得 $i$ 这个数 $(0\le i< 2^n)$.一秒恰好会获得一个数.每获得一个 ...