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

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

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

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

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

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. 2019.02.12 bzoj5294: [Bjoi2018]二进制（线段树）

    传送门 题意简述: 给出一个长度为nnn的二进制串. 你需要支持如下操作: 修改每个位置:1变0,0变1 询问对于一个区间的子二进制串有多少满足重排之后转回十进制值为333的倍数(允许前导000). ...

  2. ABP框架系列之十一：(AspNet-Core-ASPNET核心)

    Introduction This document describes ASP.NET Core integration for ASP.NET Boilerplate framework. ASP ...

  3. validatord的使用方法理解

    今天是周日,自己已经在公司上班一周啦,可是这是我感觉最难熬 一周之一,上一次还是在高考失利的时候,自己整整一个月没有出去,在家里呆着,不知道干什么,这一此自己也是,感觉自己很难在这个公司熬下去,但是, ...

  4. Java ,python面向对象的继承及其区别

    JAVA JAVA继承基本样式 class Demo extends Object{ Demo(int a){ this(); } Demo(){ super(); } } java默认继承Objec ...

  5. hdu 4027 Can you answer these queries？[线段树]

    题目 题意: 输入一个 :n  .(1<=n<<100000) 输入n个数    (num<2^63) 输入一个m :代表m个操作    (1<=m<<100 ...

  6. Android开发 - 掌握ConstraintLayout（一）传统布局的问题

    在传统的Android开发中,页面布局占用了我们很多的开发时间,而且面对复杂页面的时候,传统的一些布局会显得非常复杂,每种布局都有特定的应用场景,我们通常需要各种布局结合起来使用来实现复杂的页面.随着 ...

  7. WPF 开机注册自启动及设置确保以管理员运行

    最近用到开机自启动设置,在此记录下设置自启动的步骤,如果对各位有需要可以借阅,之前设置管理权限解释在创建解决方案是将VS以管理员方式打开,这种方法可以实现,但是个人还是偏向与本文的方式,不多说啥了,下 ...

  8. zoj4110 Strings in the Pocket（manacher）

    传送:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意:给定两个串$S$和$T$,可以翻转$S$串中的任意一个子段, ...

  9. Java实现大数相加、相乘（不使用BigInteger）

    大数相加: package algorithm; //使用BigInteger类验证 import java.math.BigInteger; public class BigAdd { public ...

  10. $.parseJson()定义和用法

    $.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象. 例子: 这里首先给出JSON字符串集,字符串集如下: var data="  { ...