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

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

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. ActiveMQ_3Java实现

    Java实现 添加相应的jar包 <dependency> <groupId>org.apache.activemq</groupId> <artifactI ...

  2. MySQL中校验规则（collation）的选取对实际数据筛选的影响

    在mysql中存在着各种utf8编码格式,如下表:1)utf8_bin2)utf8_general_ci utf8_bin将字符串中的每一个字符用二进制数据存储,区分大小写.utf8_genera_c ...

  3. 读书笔记之Linux系统编程与深入理解Linux内核

    前言 本人再看深入理解Linux内核的时候发现比较难懂,看了Linux系统编程一说后,觉得Linux系统编程还是简单易懂些,并且两本书都是讲Linux比较底层的东西,只不过侧重点不同,本文就以Linu ...

  4. 24.HashSet

    在前篇博文(HashMap)中详细讲解了HashMap的实现过程,对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保存元素.所以如果对HashMap比较熟悉,那么Has ...

  5. rand_1tom 产生 rand_1ton

    给定一个等概率随机产生1~M的随机函数rand1ToM如下: public int rand1ToM(int m) { return (int) (Math.random() * m) + 1; } ...

  6. 使用ILMerge 打包C# 绿色免安装版程序

    使用ILMerge工具,将C#项目debug目录下的exe及其依赖的dll文件打包成一个exe文件,直接双击就可运行. 使用工具: ILMerge :http://www.microsoft.com/ ...

  7. Lambda表达式where过滤数据

    使用Lambda的表达式来过滤符合条件的数据.下面的代码实现,是把字符阵列中,把名字长度等于3元素找出来. class Bv { public void LambdaExpression() { st ...

  8. 安卓Task和Back Stack

    概述 一个Activity允许用户完成一些操作,甚至,Android中设计Activity为组件的形式,这样,多个Activity--甚至是其它App的Activity可以一起完成一项任务. Task ...

  9. 【xsy2303】呀 dp

    题目大意:你需要构造一个长度为$n$的排列$A$,使得里面包含有子序列$B$(子序列$B$为一个给定的$1$到$m$的排列),且对于每个$i$,有$A[A[i]]=i$,问有多少种方案方案. 数据范围 ...

  10. Windows下为 Eclipse 配置 C/C++ 编译环境（转）

    1.Eclipse及CDT的安装 CDT的全称是C/C++ DevelopmentTools,CDT使得Eclipse能够支持C/C++的开发.直接下载 eclipse CDT 集成版 下载地址:ht ...