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

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

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. Codeforces Round #512 E - Vasya and Good Sequences

    有时候觉得自己就是个思路搬运机,只会搬运思路 这个题首先说了求的是好区间的个数,  好区间满足条件: 1.二进制位1的数量和为偶数    2.w[i]表示a[i]的二进制上1的个数 ,sum[i] = ...

  2. （转载）RHEL7(RedHat 7)本地源的配置

    配置yum源 1.首先连接RedHat7的DVD再把挂载DVD光盘到/mnt   因为配置时候路径名里面不能有空格,否则不能识别  [root@ mnt]# mount /dev/cdrom /mnt ...

  3. shell脚本基础教程

    一.什么是shell: shell解释:引用别人的话说:“Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言.” 简而言之, ...

  4. C# MVC微信扫码支付

    项目需求:学校学生网上缴费项目,刚来公司实习网上百度了各种资料,感谢很多大神避免了很多大坑. 本次扫码支付为:电脑生成二维码,手机微信扫码进行付款.建议开发前下载官方demo熟悉及后续有用到里面代码: ...

  5. unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl

    问题:unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl 解决:yum -y inst ...

  6. Javascript高级编程学习笔记（5）—— JS操作符

    话不多说,开始今天的码字之旅. 突然有种日更小说的感觉,emm... 操作符 ECMAScript(JS核心)描述了一组用于操作数据值的操作符,也包括算术操作符等等 而JS中这些操作符最鲜明的特点就是 ...

  7. 教你怎么看网站是用react搭建的

    概述 SPA和react可以说是web开发的分水岭,我一直在寻找判断网站是普通网站还是SPA抑或是react的方法.今天突然找到一个判断网站是不是react搭建的简便方法.现在记录下来供以后开发时参考 ...

  8. Java匹马行天下之JavaSE核心技术——Java基础语法

    Java基础语法 一.   认识Java 1. Java 简介 java 是一种高级的面向对象的程序设计语言,使用Java语言编写的程序时跨平台的.从pc到手机,都有Java开发的程序和游戏,Java ...

  9. python实用基本之--golb.glob

    python的强大的原因就是有很多非常实用的模块.今天用到了一个读取文件内容的小模块,做个记录: #!/usr/bin/python # -*- coding: utf-8 -*- import os ...

  10. Android分享内容和接收分享内容小小实现

    先来说说分享,毕竟没有分享何来接收分享可谈? 分享目前已实现的有两种方式:后台代码实现.ShareActionProvider实现,接着先说通过代码实现 Intent intent=new Inten ...