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

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

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. MFC中List控件动态填充数据(LVN_GETDISPINFO)

    在使用List控件的过程中,有时候List控件中需要添加大量的数据,如果使用InsertItem填充,会一次性将数据全部添加进List控件中,比较耗时.这里记录下如何动态添加List控件数据. 步骤 ...

  2. python模块：json

    r"""JSON (JavaScript Object Notation) <http://json.org> is a subset of JavaScri ...

  3. springmvc 对日期的转换与处理

    一,背景 近期项目上需求还没有确定,难道清闲,对项目中不合理的地方进行一些升级改造.鉴于项目使用的技术框架比较老旧(spring 3.0+) ,一直没有对此做大的升级改造.由于之前项目入参,出参都是使 ...

  4. shell脚本学习-printf命令

    跟着RUNOOB网站的教程学习的笔记 printf命令模仿C程序库里的printf()程序.printf由POSIX标准所定义,因此使用printf的脚本比使用echo有着更好的移植性. printf ...

  5. 利用python同步windows和linux文件

    写python脚本的初衷,每次在windows编辑完文件后,想同步到linux上去,只能够登录服务器,然后再利用网络copy,重复性很大,就想着能不能写一个小脚本帮我同步 逻辑:比对本地和服务器文件的 ...

  6. 中国移动物联网ONENET平台数据本地采集工具

    吧从中国移动物联网平台上接收的数据 实时按天保存为CSV文件或者是SQL SERVER数据库中方便进行数据处理 还可设置显示最大值,最小值,报警值,报警推送,tts语音报警等贴心功能

  7. VirtualBox中的快捷键

    VirtualBox中的快捷键 VirtualBox中的 Host 键默认是: Right Ctrl 键,意思是键盘上右边那个 “Ctrl”键. Host 键可以点击 Oracle VM Virtua ...

  8. JDBC连接池原理、自定义连接池代码实现

    首先自己实现一个简单的连接池: 数据准备: CREATE DATABASE mybase; USE mybase; CREATE TABLE users( uid INT PRIMARY KEY AU ...

  9. Python 基础：分分钟入门

    Python和Pythonic Python是一门计算机语言(这不是废话么),简单易学,上手容易,深入有一定困难.为了逼格,还是给你们堆一些名词吧:动态语言.解释型.网络爬虫.数据处理.机器学习.We ...

  10. 机器学习技法笔记：06 Support Vector Regression

    Roadmap Kernel Ridge Regression Support Vector Regression Primal Support Vector Regression Dual Summ ...