您好，在前两天对指令的简单了解和系统指令学习后

今天主要研究其指针作用域的相关事情

　　每一个指令在创建时，其实就构成了自己的一个小的模块单元。

其对于的模块单元都有着其对于的作用域，其中作用域一般有两种情况：

其一、继承父级作用域；其二、自己完全独立开辟一个新的作用域。

angularjs其作用域通过scope来实现，其取值有三种情况：true、false、{}

其默认值是false:学习也就针对这3种情况进行研究

其一、scope=false

　　和父级完全共用一个作用域

其二、scope=true

　　创建了一个新的 作用域，初始化时继承父作用域

　　表现形式：当子作用域属性值不改变一直使用父作用域对应的属性值

　　一旦子作用域的属性值发生改变，就在受父作用域影响

　　但是：这一切的前提是：数值是值类型（字符串、布尔、数值）

　　也就是说：当数值为应用类型（obj）时其实和

为了直观的体现两种的差异，下面进行一个练习：

　　

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body ng-app="myApp" ng-controller="myContro">

    父（字符串）：{{message}}<br />

    <input type="text" ng-model="message" /><br />

    名字（对象）：<input type="text" ng-model="user.name" /><br />

    <div style="width:auto;border-bottom:2px solid #000000">

        <h4>scope=true:创建了一个新的 作用域，初始化时继承父作用域</h4>

    </div>

    <div my-direct>

        孩（字符串）：{{message}}<br />

        <input type="text" ng-model="message" /><br />

        名字（对象）：<input type="text" ng-model="user.name" /><br />

    </div>

    <div style="width:auto;border-bottom:2px solid #000000">

        <h4>scope=false:和父级完全共用一个作用域</h4>

    </div>

    <div my-direct>

        孩（字符串）：{{message}}<br />

        <input type="text" ng-model="message" /><br />

        名字（对象）：<input type="text" ng-model="user.name" /><br />

    </div>

    <div style="width:auto;border-bottom:2px solid #000000">

    </div>

    <h4>小结</h4>

    scope=true:创建了一个新的 作用域，初始化时继承父作用域<br />

    <div style="margin-left:100px;">

        表现形式：当子作用域属性值不改变一直使用父作用域对应的属性值<br />

        一旦子作用域的属性值发生改变，就在受父作用域影响<br />

        但是：这一切的前提是：数值是值类型（字符串、布尔、数值）<br />

        也就是说：当数值为应用类型（obj）时其实和<br />

    </div>

    scope=false:和父级完全共用一个作用域<br />

</body>

</html>

<script src="Scripts/angular.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {

        $scope.message = "im father message";

        $scope.user = {

            name: "father"

        }

    });

    app.directive("myDirect", function () {

        return {

            restrict: "A",

            replace: true,

            scope: true

        };

    });

    app.directive("myDirect2", function () {

        return {

            restrict: "A",

            replace: true,

            scope: false

        };

    });

</script>
　　
　　
　　

　　

angularjs学习第八天笔记（指令作用域研究）的更多相关文章

  1. angularjs学习第九天笔记（指令作用域【隔离作用域】研究）

    您好,昨天学习了指令作用域为布尔型的情况, 今天主要研究其指针作用域为{}的情况 1.当作用域scope为{}时,子作用域完全创建一个独立的作用域, 此时,子做预约和外部作用域完全不数据交互 但是,在 ...

  2. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  3. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  4. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  5. angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  6. angularjs学习第二天笔记---过滤器

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  7. iOS 阶段学习第八天笔记（指针）

    iOS学习(C语言)知识点整理 一.指针 1)概念:存储变量的地址的一个变量. 2) 数据存储类型分析 1.text (代码段) :存储二进制的可执行代码 2.data(初始化的数据段) 存储初始化的 ...

  8. 【AngularJS学习笔记】01 指令、服务和过滤器

    AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...

  9. 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

随机推荐

  1. visual studio 2013怎样快速查看代码函数关系--代码图

    可以发现没有调试运行代码时是无法查看代码图的,可以在某行加一个断点,如下图,并开始debug调试: 这时,就会在代码调试工具栏看到代码图按钮,点击它: 右边就会出现代码图了: 这下就方便多了. 不仅适 ...

  2. 我的第一个python爬虫

    我的第一个爬虫,哈哈,纯面向过程 实现目标: 1.抓取本地conf文件,其中的URL地址,然后抓取视频名称以及对应的下载URL 2.抓取URL会单独写在本地路径下,以便复制粘贴下载 废话补多少,代码实 ...

  3. 题解 luogu P1144 【最短路计数】

    本蒟蒻也来发一次题解第一篇请见谅 这个题有几个要点 1.无向无权图,建图的时候别忘记建来回的有向边[因此WA掉1次 2.无权嘛,那么边长建成1就好了2333333 3.最短路采用迪杰斯特拉(别忘用堆优 ...

  4. 向Word添加一段文本

    文档层次结构 [段落之后] 是一段连续文本,它定义具有一组常见属性的文本区域.一段连续文本由 r 元素表示,这样创建器便可组合换行.样式或格式设置属性,从而将相同信息应用于一段连续文本的所有部分. 正 ...

  5. _ZNote_Qt_QtCreator_Tips_粘贴_历史剪切板

    发现 快捷键 Shift+Command + V 能够出现历史剪切板. 厉害了我的歌

  6. iOS逆向工程之Cycript

    1.连接设备 打开一个终端,输入指令: iproxy 重新打开一个新的终端,输入指令: ssh -p root@127.0.0.1 这时候会提示输入密码:默认密码为“alpine”.这样就可以连接到设 ...

  7. [.net core学习] .net core中的Rijndael取代方法

    The difference (in .NET) between Rijndael and AES is that Rijndael allows the block size to change, ...

  8. 【接口时序】1、软件与Verilog基本格式规范说明

    一. 说明 以前总是没有记录的习惯,导致遇到问题时总得重新回忆与摸索,大大降低了学习效率,从今天开始决定改掉这个坏毛病,认真记录自己的Verilog学习之路,希望自己能一直坚持下去. 二. 软件资源与 ...

  9. vue keep-alive解决关闭标签动态缓存问题

    直接上代码: <keep-alive :include='topNavMentNames'> <router-view ></router-view> </k ...

  10. Scala微服务架构 三

    四 Controller层 之前我们已经把基层架构搭建好了,那么要如何使用呢? 首先看看我的Controller层代码 @Singleton class BMAuthController @Injec ...