angularjs学习第九天笔记(指令作用域【隔离作用域】研究)

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

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

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>

好了,时间不早了,周五早点休息

通过最近学习,感觉进度很慢,后续加快学习步骤

明天继续学习指令的其他属性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏angularejs学习篇

angularjs学习第九天笔记(指令作用域【隔离作用域】研究)

1232
来自专栏Golang语言社区

Golang语言 与 C 语言 的比较学习

对于MarkDown 编译器没有自动保存功能这件事情, 我表示严重的厌恶。 一个来小时的整理化为乌有,而且居然还不能导入到HTML编辑器, 真是无法忍受! 关键...

3657
来自专栏ASP.NETCore

.NET Core中妙用unsafe减少gc提升字符串处理性能

昨天在群里讨论怎么样效率的把一个字符串进行反转,一般的情况我们都知道,只要对String对象进行操作, 那么就会生成新的String对象,比如"1"+"2" 这...

4651
来自专栏点滴积累

Scala 中方法扩展实践

这个名字不知道取得是否合适,简单来说要干的事情就是给某个类型添加一些扩展方法,此场景在各种语言中都会用到,比如 C# 语言,如果我们使用一个别人写好的类库,而又...

761
来自专栏智能算法

Python学习(二)---- 字符串操作、列表字典及深浅拷贝等

https://blog.csdn.net/fgf00/article/details/52061971

1192
来自专栏JavaQ

多参数方法进阶

很多高级工程师还在写包含N个参数的方法、使用setter方法构造实例,其实这些方式都是过时并且有很大缺陷的,本篇将深入讲解这些问题及解决方法。 多参数方法的问题...

34211
来自专栏Golang语言社区

《GO并发编程实战》—— 原子操作

我们已经知道,原子操作即是进行过程中不能被中断的操作。也就是说,针对某个值的原子操作在被进行的过程当中,CPU绝不会再去进行其它的针对该值的操作。无论这些其它的...

4537
来自专栏编程一生

PHP开发人员对JAVA的WEB开发入门(初版-基础知识)

1264
来自专栏林德熙的博客

C# 谁改了我的代码

其中的 Foo 是其他的函数,大家可以猜到输出是 lindexi ,但是,实际上把Foo调用函数添加之后,输出是 Lindexi 被大写了。那么这时 Foo 做...

641
来自专栏java一日一条

代码优化那些事

/**************************************************************************/

693

扫码关注云+社区

领取腾讯云代金券