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

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

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

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

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

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. 源码管理工具Git-windows平台使用Gitblit搭建Git服务器

    原文地址:https://blog.csdn.net/smellmine/article/details/52139299 搭建Git服务器,请参照上面链接. 注意: 第十二步:以Windows Se ...

  2. Paper | Batch Normalization

    目录 1. PROBLEM 1.1. Introduction 1.2. Analysis 2. SOLUTION 2.1. Batch Normalization 及其问题 2.2. 梯度修正及其问 ...

  3. Paper | 亚像素运动补偿 + 视频超分辨

    目录 1. ABSTRACT 2. INTRODUCTION 3. RELATED WORKS 4. SUB-PIXEL MOTION COMPENSATION (SPMC) 5. OUR METHO ...

  4. Paper | 块分割信息 + 压缩视频质量增强

    目录 1. 亮点 2. 网络 3. Mask 及其融合 4. 结论 论文:Enhancing HEVC Compressed Videos with a Partition-Masked Convol ...

  5. iowait过高处理

    网管告警: 告警主机:YiDHLWJKFZ-js-app- 主机IP:192.168.***.*** 告警项目:system.cpu.util[,iowait] 告警时间: :: 告警等级:Warni ...

  6. 7.AOP编程

    注解和xml混合使用 1.将所有的bean都配置xml中 <bean id="" class=""> 2.将所有的依赖都使用注解 @Autowire ...

  7. 安装过redis集群，重新做集群办法：

    二:找到问题:这个地方IP的问题,以上是正确的版本,以前有问题的版本的Ip是127.0.0.1, 原因是这个地方以前我没注释redis.conf文件中的bind 127.0.0.1 然后做集群时使用的 ...

  8. 第二十二节：Java语言基础-详细讲解位运算符与流程控制语句

    位运算符(二进制位运算) 运算符 运算 例子 << 左移 3 << 2 = 12 --> 3 * 2 * 2 =12 >> 右移 3 >> 1 = ...

  9. HTML里面form表单name,action,method,target,enctype等属性用法

    HTML里面的form表单里面的name,target,enctype,method以及action的用法 HML表单HTML里面的表单是HTML页面与浏览器交互的重要手段,表单主要提交一些客户端的数 ...

  10. 跨浏览器的javascript事件的封装

    一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...