angularjs学习第九天笔记（指令作用域【隔离作用域】研究）
您好，昨天学习了指令作用域为布尔型的情况，
今天主要研究其指针作用域为{}的情况
1、当作用域scope为{}时，子作用域完全创建一个独立的作用域，
此时，子做预约和外部作用域完全不数据交互
但是，在实际应用中，子做作用域也还是要和外部数据交互。
为止，引入了数据绑定概念
2、隔离作用域数据绑定有三种方式：
其一、“@”
格式为：
scope{
属性名称:"@"
}
子外作用域数据交互表现：
隔离的子作用域和外部作用域实现单向数据绑定，
及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变
其二、“=”：
格式为：
scope{
属性名称:"@"
}
子外作用域数据交互表现：
隔离的子作用域和外部作用域实现双向数据绑定，
及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变
其三、“&”：
格式为：
scope{
属性名称:"&"
}
子外作用域数据交互表现：
隔离的子作用域和外部作用域实现实现函数交互，
及子作用域可以调用外部作用域函数
下面来一个练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body ng-app="myApp" ng-init="message='person infor'" ng-controller="myContro">
<h4>外部控制器</h4>
<div>person message:{{message}}</div>
<input type="text" ng-model="message" />
<br />
<br />
<h4>scope={}时，完全隔离一个子作用域，不能与外部进行数据交互</h4>
<div my-direct>
</div>
<br />
<br />
<h4>
scope={@}时，隔离的子作用域和外部作用域实现单向数据绑定，
<br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变
</h4>
<div my-direct2 message="{{message}}">
</div>
<br />
<br />
<h4>
scope={=}时，隔离的子作用域和外部作用域实现双向数据绑定，
<br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变
</h4>
<div my-direct3 message="message">
</div>
<br />
<br />
<h4>
scope={&}时，隔离的子作用域和外部作用域实现实现函数交互，
<br />及子作用域可以调用外部作用域函数
</h4>
<div my-direct4 get-date="getDate()">
</div>
</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $filter) {
$scope.getDate = function () {
$scope.message = $filter("date")(Date.now(),"yyyy-MM-dd HH:mm:ss");
}
}); app.directive("myDirect", function () {
return {
restrict: "A",
replace: true,
scope:{},
template: "<div ng-init=\"message='child infor'\">\
child message:{{message}}<br/>\
<input type='text' ng-model='message'/></div>"
}
}); app.directive("myDirect2", function () {
return {
restrict: "A",
replace: true,
scope: {
message: "@",
},
template: "<div ng-init=\"message='child infor'\">\
child message:{{message}}<br/>\
<input type='text' ng-model='message'/></div>"
}
}); app.directive("myDirect3", function () {
return {
restrict: "A",
replace: true,
scope: {
message: "=",
},
template: "<div ng-init=\"message='child infor'\">\
child message:{{message}}<br/>\
<input type='text' ng-model='message'/></div>"
}
}); app.directive("myDirect4", function () {
return {
restrict: "A",
replace: true,
scope: {
getDate: "&",
},
template: "<div ng-init=\"message='child infor'\">\
child message:{{message}}<br/>\
<input type='text' ng-model='message'/>\
<input type='button' value='获取系统时间'\
ng-click='getDate()'/></div>"
}
});
</script>
好了，时间不早了，周五早点休息
通过最近学习，感觉进度很慢，后续加快学习步骤
明天继续学习指令的其他属性
angularjs学习第九天笔记（指令作用域【隔离作用域】研究）的更多相关文章
- Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation
原文:Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令
1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...
- angularjs学习第八天笔记（指令作用域研究）
您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...
- angularjs学习第一天笔记
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...
- angularjs学习第二天笔记---过滤器
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- iOS 阶段学习第九天笔记（内存管理）
iOS学习(C语言)知识点整理 一.内存管理 1)malloc , 用于申请内存; 结构void *malloc(size_t),需要引用头文件<stdlib.h>:在堆里面申请内存,si ...
- Angularjs学习笔记7_directive1
1.基础知识 directive()接受两个参数 · name:字符串,指令的名字 · factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_f ...
- angularjs学习第七天笔记（系统指令学习）
您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...
随机推荐
- J2CACHE 两级缓存框架
概述 缓存框架我们有ehcache 和 redis 分别是 本地内存缓存和 分布式缓存框架.在实际情况下如果单台机器 使用ehcache 就可以满足需求了,速度快效率高,有些数据如果需要多台机器共享这 ...
- javascript 取整,取余数 math方法
1.丢弃小数部分,保留整数部分 parseInt() 函数可解析一个字符串,并返回一个整数. parseInt(string, radix) 参数 描述 string 必需.要被解析的字符串. rad ...
- 读取嵌入到word的Excel对象
Word.Document doc = this._wordApplication.Documents.Add(@"C:\Users\linmeicheng\Desktop\新建文件夹 (3 ...
- Azure DevOps Server（TFS）: 在Excel中解除服务器同步
通过Azure DevOps Server 提供与Excel集成的功能,用户可以非常便捷地使用Excel,实现工作项数据的同步. 对于需要批量处理数据.离线工作.制作临时报表的用户来说,这个功能必定成 ...
- 仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--.嘿嘿 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下, ...
- java visualVM(jconsole)远程监控服务器java进程
1. JMX方式(jconsole也可通过此方式进行连接) jmx方式能监控到CPU信息,但无法使用visualVM的visualVM GC插件 jmx无密码方式 监控普通的java进程 . 设 ...
- AndroidStudio制作“我”的界面，设置，修改密码，设置密保和找回密码
前言 大家好,给大家带来AndroidStudio制作"我"的界面,设置,修改密码,设置密保和找回密码的概述,希望你们喜欢 学习目标 掌握修改密码功能的开发,和实现用户密码的修改: ...
- Unicode 字符串排序规则（一）：如何确定单个字符的顺序
一.一个具体的例子引发的问题 当今是国际化的时代,多种语言可能同时显示在屏幕上.比如一个人可能喜欢听华语歌.英文歌.韩文歌和日语歌,又比如他的联系人中有中国人.英国人.日本人.韩国人以及有英文名字的中 ...
- thinkpad的E480安装ubuntu后wifi无法使用问题解决
买了新电脑,安装ubuntu新系统之后,遇到了一个比较麻烦的问题,在ubuntu中,无法使用wifi. 用新产品就是要当小白鼠啊,查了一下资料,发现这个使用的rtl8821ce的wifi芯片,该wif ...
- Win10手记-为应用集成SQLite（一）
SQLite是什么?熟悉移动端开发的朋友都会经常接触,无论是iOS的CoreData还是安卓的内置数据库,他们都是采用了SQLite这个轻量高效数据库,微信也是如此.可以说SQLite是目前移动端最为 ...