您好,昨天学习了指令作用域为布尔型的情况,

今天主要研究其指针作用域为{}的情况

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学习第九天笔记(指令作用域【隔离作用域】研究)的更多相关文章

  1. Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation

    原文:Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...

  2. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  3. angularjs学习第八天笔记(指令作用域研究)

    您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...

  4. angularjs学习第一天笔记

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  5. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  6. angularjs学习第二天笔记---过滤器

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  7. iOS 阶段学习第九天笔记(内存管理)

    iOS学习(C语言)知识点整理 一.内存管理 1)malloc , 用于申请内存; 结构void *malloc(size_t),需要引用头文件<stdlib.h>:在堆里面申请内存,si ...

  8. Angularjs学习笔记7_directive1

    1.基础知识 directive()接受两个参数 · name:字符串,指令的名字 · factory_function:函数,指令的行为 应用启动时,以name作为该应用的标识注册factory_f ...

  9. angularjs学习第七天笔记(系统指令学习)

    您好,接着在昨天对简单指令学习了解以后,今天开始学习了解angularjs中的系统指令 系统指令大部分都是以ng开始,这也是为什么在自定义指令命名时不要以ng开始的原因所在 系统指令在学习了分成两个部 ...

随机推荐

  1. Mybatis的针对于同一个有自己父类或子类的递归查询 (如商品分类)

    1.pojo代码 private Integer categoryId; private Integer superId; private String name; private Byte leve ...

  2. MFC程序执行后台操作时不允许操作界面的一种方法

    在使用MFC编写界面程序时,有时候会遇到像点击按钮后,后台进行大量操作后才显示处理结果这种情况,在后台处理过程中,界面不应该被允许做任何操作,这里介绍一种方法. 解决办法 点击按钮后,弹出一个模态对话 ...

  3. springmvc接收数组方式总结

    1.接受正常的数组 如param1=aaa&param1=bbb&param1=3 对于这种,在实体参数中,使用String param1[] 这种参数既可以获取数组的值 2.接受数组 ...

  4. Alpha冲刺 (2/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 学习并配置了ssm框架(用于前后端交 ...

  5. [ 9.26 ]CF每日一题系列—— 771B递推问题

    Description: 给定你命名的规律,1-10个字符,开头必须大写,最多有50个名字,然后告诉你有n个人,判断区间长度为k,那么你将得到n - k + 1个答案(YES or NO) 表示1 - ...

  6. Exception、Error、运行时异常与一般异常有何异同

    转自博客  https://blog.csdn.net/m0_37531231/article/details/79502778 一.开场白 对于程序运行过程中的可能出现异常情况,java语言使用一种 ...

  7. PMP:2.项目运行环境

    事业环境因素(EEF):事业环境因素源于项目外部(往往是企业外部)的环境,是指项目团队不能控制的,将对项目产生影响.限制或指令作用的各种条件. 组织内部的事业环境因素: {     uu组织文化.结构 ...

  8. docker rmi命令-删除image

    rmi 删除image Usage: docker rmi IMAGE [IMAGE...]Remove one or more images -f,--force=falseForce remova ...

  9. 进程控制(Note for apue and csapp)

    1. Introduction We now turn to the process control provided by the UNIX System. This includes the cr ...

  10. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...