angularjs学习第八天笔记（指令作用域研究）

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

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

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

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

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

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>

转载于:https://www.cnblogs.com/xiaoXuZhi/p/angularjs_scope001.html

angularjs学习第八天笔记（指令作用域研究）相关推荐

AngularJs学习之ng-repeat-start,ng-repeat-end 指令
2019独角兽企业重金招聘Python工程师标准>>> 1 ng-repeat指令: 循环输出数组或者对象内容到html <!DOCTYPE html> <html ...
AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
oracle rac 仲裁盘_【学习笔记】深入研究Oracle RAC节点驱逐的条件和案例
天萃荷净 Oracle研究中心学习笔记:分享一篇关于Oracle数据库RAC环境中节点间管理的文章,详细介绍了RAC节点驱逐条件和管理方法. 本站文章除注明转载外,均为本站原创: 转载自loveOra ...
【AngularJs学习笔记三】Grunt任务管理器
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...
2020-03-25阅读笔记-虚拟学习社区中隐性知识传播研究
本文系阅读李玉斌老师发表在电化教育研究上的论文<虚拟学习社区中隐性知识传播研究>上所做的笔记,由于水平有限,如果理解上存在误差,还请批评指正. 3.虚拟学习社区隐性知识的传播机制 3.1知 ...
AngularJS 学习笔记---AngularJS 简介
AngularJS 简介 http://www.runoob.com/angularjs/angularjs-intro.html https://docs.angularjs.org/api/ng ...
文献阅读笔记：基于深度学习的桥梁裂缝检测算法研究
论文 | 基于深度学习的桥梁裂缝检测算法研究作者 | 李良福.马卫飞.李丽.陆铖期刊 | 自动化学报时间 | 2019年9月论文目的: 传统的图像处理算法不能很好地对桥梁裂缝进行检测 , ...
第五篇《深度学习在故障诊断领域中的研究现状与挑战》论文阅读笔记
[1]任浩,屈剑锋,柴毅,唐秋,叶欣.深度学习在故障诊断领域中的研究现状与挑战[J].控制与决策,2017,32(08):1345-1358. 深度学习在故障诊断领域中的研究现状与挑战一.文章本身 ...

angularjs学习第八天笔记（指令作用域研究）

angularjs学习第八天笔记（指令作用域研究）相关推荐

最新文章

热门文章