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. FEAT: Front-End Auto Testing

    FEAT FEAT: Front-End Auto Testing 前端自动化测试 jest $ yarn add -D jest # OR $ npm i -D jest https://jestj ...

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

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

  3. jmeter简单录制脚本

    1 创建HTTP请求默认值. --添加线程组:右击"测试计划"→添加→Threads(Users)→线程组,建议重命名线程组增强可读性. --添加HTTH请求默认值:右击" ...

  4. jquery Ajax noConflict()

    如果幾個框架都在使用$作為標識符,那麼這個時候可以使用noConflict()處理衝突. 可以直接使用jquery代替簡寫,也可以定義變量,也可以將$賦值給ready函數,函數內部可以使用快捷方式,不 ...

  5. Java代码封装redis工具类

    maven依赖关系: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis&l ...

  6. SSM三大框架整合配置（Spring+SpringMVC+MyBatis）

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  7. 洛谷P4088 [USACO18FEB]Slingshot

    题面 大意:给出n个弹弓,可以用ti的时间把xi位置运到yi,在给出m组询问,求xj到yj最小时间. sol:首先如果不用弹弓,时间应为abs(xj-yj).否则时间就是abs(xi-xj)+abs( ...

  8. C++拷贝构造函数与 = 重载

    调用拷贝构造函数进行初始化的时候,是不会调用=重载的. // test.cpp : 定义控制台应用程序的入口点. // //#include "stdafx.h" #include ...

  9. 关于mysql的压测sysbench

    测试表格:CREATE TABLE `sbtest` ( `id` int(10) unsigned NOT NULL auto_increment, `k` int(10) unsigned NOT ...

  10. lambda 分类抽取N条

    从每个分类中,按照比例抽取 lista中percent是比例,按照这个比例抽取. static List<A> lista = new List<A>() { new A(){ ...