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>
angularjs学习第八天笔记(指令作用域研究)的更多相关文章
- angularjs学习第九天笔记(指令作用域【隔离作用域】研究)
您好,昨天学习了指令作用域为布尔型的情况, 今天主要研究其指针作用域为{}的情况 1.当作用域scope为{}时,子作用域完全创建一个独立的作用域, 此时,子做预约和外部作用域完全不数据交互 但是,在 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备!
作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...
- angularjs学习第一天笔记
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- angularjs学习第二天笔记---过滤器
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- iOS 阶段学习第八天笔记(指针)
iOS学习(C语言)知识点整理 一.指针 1)概念:存储变量的地址的一个变量. 2) 数据存储类型分析 1.text (代码段) :存储二进制的可执行代码 2.data(初始化的数据段) 存储初始化的 ...
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
随机推荐
- Awesome Python 中文版
Awesome Python ,这又是一个 Awesome XXX 系列的资源整理,由 vinta 发起和维护.内容包括:Web框架.网络爬虫.网络内容提取.模板引擎.数据库.数据可视化.图片处理.文 ...
- 基于OpenCV的图书扫描识别程序开发
1.AndroidStudio环境配置 https://www.cnblogs.com/little-monkey/p/7162340.html
- 2017-2018-1 20155326信息安全系统设计基础》嵌入式C语言课上考试补交
2017-2018-1 20155326信息安全系统设计基础>嵌入式C语言课上考试补交 PPT上的例子 已知位运算规则为: &0 --> 清零 &1 --> 不变 | ...
- 添加自己的component
在之前讲解esp-idf的文件结构时,曾经讲过component是esp-idf集成的功能块,这篇文章就来讲解下,如何在esp-idf 中添加自己的component. STEP1; 创建compon ...
- js-运动函数(盒子运动)
注意move的js包在另一篇文章 <!DOCTYPE html><html> <head> <meta charset="UTF-8"&g ...
- cad2012卸载/安装失败/如何彻底卸载清除干净cad2012注册表和文件的方法
cad2012提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2012失败提示cad2012安装未完成,某些产品无法安装,也有时候想重新安装cad2012 ...
- java visualVM(jconsole)远程监控服务器java进程
1. JMX方式(jconsole也可通过此方式进行连接) jmx方式能监控到CPU信息,但无法使用visualVM的visualVM GC插件 jmx无密码方式 监控普通的java进程 . 设 ...
- 《JavaScript面向对象编程指南》读书笔记②
概述 <JavaScript面向对象编程指南>读书笔记① 这里只记录一下我看JavaScript面向对象编程指南记录下的一些东西.那些简单的知识我没有记录,我只记录几个容易遗漏的或者精彩的 ...
- 处理返回键劫持(结合vue)
在这里记录一下近期解决的一个问题 需求,在某个页面,浏览器返回按钮点击的时候,不能走浏览器的默认返回操作,而是要走自己的逻辑, 比如跳转页面等等. 那么问题来了,如何去不走默认返回呢.经过网上搜罗和同 ...
- Java 命令行启动时指定配置文件目录
java -jar -Xbootclasspath/a:/home/tms/conf /home/tms/bin/S17-tms.jar 先指定配置文件目录: 再指定jar包路径: 运行clas ...