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

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

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

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

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

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. 解决跨域脚本攻击 XSS

    配置Content Security Policy    传送门:作者: 阮一峰 http://www.ruanyifeng.com/blog/2016/09/csp.html [前端安全]JavaS ...

  2. 牛客练习赛31 B 赞迪卡之声妮莎与奥札奇 逻辑,博弈 B

    牛客练习赛31 B 赞迪卡之声妮莎与奥札奇 https://ac.nowcoder.com/acm/contest/218/B 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 2621 ...

  3. Unable to instantiate Action, xxxAction, defined for 'xxxAction' in namespace '/'xxx

    最近写SSH2的项目时,遇到一些小问题,action得不到service实例,遂将struct2委托给spring进行管理,然后修改了bean的id和action的class,但是运行后发现找不到ac ...

  4. Tomcat架构解析(五)-----Tomcat的类加载机制

    类加载器就是根据类的全限定名(例如com.ty.xxx.xxx)来获取此类的二进制字节流的代码模块,从而程序可以自己去获取到相关的类. 一.java中的类加载器   1.类加载器类别 java中的类加 ...

  5. PowerShell工作流学习-1-嵌套工作流和嵌套函数

    关键点: a)嵌套深度没有任何语法限制,但是嵌套三个层次的工作流不支持任何通用参数,包括工作流通用参数 b)嵌套工作流可以调用当前范围和任何父范围内的工作流和函数 c)工作流不允许递归调用,脚本和函数 ...

  6. Codesmith怎么判断sqlserver数据库字段是不是标识自增字段

    Codesmith怎么判断sqlserver数据库字段是不是标识自增字段 使用ExtendedProperty扩展信息判断 CS_isIdentity:是否为标识符,不支持Access CS_isCo ...

  7. bzoj3637(lct)

    又一次把lct写炸了,硬着头皮终于改对了 #include<iostream> #include<cstring> #include<cstdio> #includ ...

  8. 前端vue框架 父组件与子组件之间的相互调用

    子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...

  9. samba服务配置（一）

    samba是一个实现不同操作系统之间文件共享和打印机共享的一种SMB协议的免费软件. samba软件结构: /etc/samba/smb.conf    #samba服务的主要配置文件 /etc/sa ...

  10. DevExpress--TreeList节点添加图片

    这个过程相对来说比较简单,网上也有不少资料,但是自己在做过之后为了记住,算是给自己写一个博客吧. 下面直接上具体的流程 1.前提 控件使用的都是DevExpress和winform的原生控件两种: 2 ...