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

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

1、当作用域scope为{}时，子作用域完全创建一个独立的作用域，

　　此时，子做预约和外部作用域完全不数据交互

　　但是，在实际应用中，子做作用域也还是要和外部数据交互。　　

　　　　　为止，引入了数据绑定概念

2、隔离作用域数据绑定有三种方式：

　　其一、“@”

　　　　格式为：

　　　　　　scope{

　　　　　　　　属性名称:"@"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现单向数据绑定，

　　　　　　及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变

　　其二、“=”：

　　　　　格式为：

　　　　　　scope{

　　　　　　　　属性名称:"@"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现双向数据绑定，

　　　　　　及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变

　　其三、“&”：

　　　　  格式为：

　　　　　　scope{

　　　　　　　　属性名称:"&"

　　　　　　}

　　　　子外作用域数据交互表现：

　　　　　　隔离的子作用域和外部作用域实现实现函数交互，

　　　　　　及子作用域可以调用外部作用域函数

下面来一个练习：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <body ng-app="myApp" ng-init="message='person infor'" ng-controller="myContro">
  8.     <h4>外部控制器</h4>
  9.     <div>person message:{{message}}</div>
  10.     <input type="text" ng-model="message" />
  11.     <br />
  12.     <br />
  13.     <h4>scope={}时，完全隔离一个子作用域，不能与外部进行数据交互</h4>
  14.     <div my-direct>
  15.     </div>
  16.     <br />
  17.     <br />
  18.     <h4>
  19.         scope={@}时，隔离的子作用域和外部作用域实现单向数据绑定，
  20.         <br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值不改变
  21.     </h4>
  22.     <div my-direct2 message="{{message}}">
  23.     </div>
  24.     <br />
  25.     <br />
  26.     <h4>
  27.         scope={=}时，隔离的子作用域和外部作用域实现双向数据绑定，
  28.         <br />及外部对应值改变，子作用域值也改变，子作用域值改变父作用域值也改变
  29.     </h4>
  30.     <div my-direct3 message="message">
  31.     </div>
  32.     <br />
  33.     <br />
  34.     <h4>
  35.         scope={&}时，隔离的子作用域和外部作用域实现实现函数交互，
  36.         <br />及子作用域可以调用外部作用域函数
  37.     </h4>
  38.     <div my-direct4 get-date="getDate()">
  39.     </div>
  40. </body>
  41. </html>
  42. <script src="Scripts/angular.js"></script>
  43. <script type="text/javascript">
  44.     var app = angular.module("myApp", []);
  45.  
  46.     app.controller("myContro", function ($scope, $filter) {
  47.         $scope.getDate = function () {
  48.             $scope.message = $filter("date")(Date.now(),"yyyy-MM-dd HH:mm:ss");
  49.         }
  50.     });
  51.  
  52.     app.directive("myDirect", function () {
  53.         return {
  54.             restrict: "A",
  55.             replace: true,
  56.             scope:{},
  57.             template: "<div ng-init=\"message='child infor'\">\
  58.                         child message:{{message}}<br/>\
  59.                        <input type='text' ng-model='message'/></div>"
  60.         }
  61.     });
  62.  
  63.     app.directive("myDirect2", function () {
  64.         return {
  65.             restrict: "A",
  66.             replace: true,
  67.             scope: {
  68.                 message: "@",
  69.             },
  70.             template: "<div ng-init=\"message='child infor'\">\
  71.                         child message:{{message}}<br/>\
  72.                         <input type='text' ng-model='message'/></div>"
  73.         }
  74.     });
  75.  
  76.     app.directive("myDirect3", function () {
  77.         return {
  78.             restrict: "A",
  79.             replace: true,
  80.             scope: {
  81.                 message: "=",
  82.             },
  83.             template: "<div ng-init=\"message='child infor'\">\
  84.                         child message:{{message}}<br/>\
  85.                         <input type='text' ng-model='message'/></div>"
  86.         }
  87.     });
  88.  
  89.     app.directive("myDirect4", function () {
  90.         return {
  91.             restrict: "A",
  92.             replace: true,
  93.             scope: {
  94.                 getDate: "&",
  95.             },
  96.             template: "<div ng-init=\"message='child infor'\">\
  97.                         child message:{{message}}<br/>\
  98.                         <input type='text' ng-model='message'/>\
  99.                         <input type='button' value='获取系统时间'\
  100.                         ng-click='getDate()'/></div>"
  101.         }
  102.     });
  103. </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. Python开发——3.基本数据类型之列表、元组和字典

    一.列表(list) 1.列表的格式 li = [11,22,"kobe",["lakers","ball",11],(11,22,),{& ...

  2. STM32外设初始化步骤

    1.定义外设结构体: 2.开启外设时钟: 3.调用缺省值配置函数: 4.外设具体配置: 5.外设使能.

  3. modelsin联合仿真

    1-选择eda仿真工具  tool->options->eda tool options 2-assignments->settings->eda tool settings- ...

  4. veri HDL modeisim仿真：test bench文件编写

    预编译指令: verilog HDL预编译指令是以" ' "字符开头,而且不需要以";"结尾. 作用:指示在编译verilog hdl源代码前,需要执行哪些操作 ...

  5. django创建上下文

    在app中创建context_processes.py(可以是别的名字),然后加载到settings里,这样所有的网页都可以传入变量 from .models import User def app0 ...

  6. 给JavaScript24条最佳实践

    作为“30 HTML和CSS最佳实践”的后续,这篇文章将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧! 1.使用 === 代替 == JavaScript ...

  7. CPP全面总结（涵盖C++11标准）

    OOP之类和对象 1. this指针的引入 每个成员函数都有一个额外的隐含的形参,这个参数就是this指针,它指向调用对象的地址.默认情况下,this的类型是指向类类型非常量版本的常量指针.可以表示成 ...

  8. Spring事务管理（详解+实例）

    1 初步理解 理解事务之前,先讲一个你日常生活中最常干的事:取钱. 比如你去ATM机取1000块钱,大体有两个步骤:首先输入密码金额,银行卡扣掉1000元钱:然后ATM出1000元钱.这两个步骤必须是 ...

  9. JAVA学习路线——匹马行天下

  10. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 8.仪表盘 Dashboard(horizon)安装配置

    仪表盘Dashboard(horizon)是一个web接口,使得云平台管理员以及用户可以管理不同的Openstack资源以及服务.这个部署示例使用的是 Apache Web 服务器. 节点配置信息说明 ...