angularjs学习第八天笔记(指令作用域研究)

您好,在前两天对指令的简单了解和系统指令学习后

今天主要研究其指针作用域的相关事情

  每一个指令在创建时,其实就构成了自己的一个小的模块单元。

其对于的模块单元都有着其对于的作用域,其中作用域一般有两种情况:

其一、继承父级作用域;其二、自己完全独立开辟一个新的作用域。

angularjs其作用域通过scope来实现,其取值有三种情况:true、false、{}

其默认值是false:学习也就针对这3种情况进行研究

其一、scope=false

  和父级完全共用一个作用域

其二、scope=true

  创建了一个新的 作用域,初始化时继承父作用域

  表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值

  一旦子作用域的属性值发生改变,就在受父作用域影响

但是:这一切的前提是:数值是值类型(字符串、布尔、数值)

  也就是说:当数值为应用类型(obj)时其实和

为了直观的体现两种的差异,下面进行一个练习:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body ng-app="myApp" ng-controller="myContro">
    父(字符串):{{message}}<br />
    <input type="text" ng-model="message" /><br />
    名字(对象):<input type="text" ng-model="user.name" /><br />
    <div style="width:auto;border-bottom:2px solid #000000">
        <h4>scope=true:创建了一个新的 作用域,初始化时继承父作用域</h4>
    </div>
    <div my-direct>
        孩(字符串):{{message}}<br />
        <input type="text" ng-model="message" /><br />
        名字(对象):<input type="text" ng-model="user.name" /><br />
    </div>
    <div style="width:auto;border-bottom:2px solid #000000">
        <h4>scope=false:和父级完全共用一个作用域</h4>
    </div>
    <div my-direct>
        孩(字符串):{{message}}<br />
        <input type="text" ng-model="message" /><br />
        名字(对象):<input type="text" ng-model="user.name" /><br />
    </div>
    <div style="width:auto;border-bottom:2px solid #000000">
    </div>
    <h4>小结</h4>
    scope=true:创建了一个新的 作用域,初始化时继承父作用域<br />
    <div style="margin-left:100px;">
        表现形式:当子作用域属性值不改变一直使用父作用域对应的属性值<br />
        一旦子作用域的属性值发生改变,就在受父作用域影响<br />
        但是:这一切的前提是:数值是值类型(字符串、布尔、数值)<br />
        也就是说:当数值为应用类型(obj)时其实和<br />
    </div>
    scope=false:和父级完全共用一个作用域<br />

</body>
</html>
<script src="Scripts/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myContro", function ($scope) {
        $scope.message = "im father message";
        $scope.user = {
            name: "father"
        }
    });

    app.directive("myDirect", function () {
        return {
            restrict: "A",
            replace: true,
            scope: true
        };
    });

    app.directive("myDirect2", function () {
        return {
            restrict: "A",
            replace: true,
            scope: false
        };
    });
</script>

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mwangblog

python条件执行

1314
来自专栏java一日一条

JavaScript 中 this 的使用技巧总结

在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了。

813
来自专栏Golang语言社区

Go 语言指针

Go 语言中指针是很容易学习的,Go 语言中使用指针可以更简单的执行一些任务。 接下来让我们来一步步学习 Go 语言指针。 我们都知道,变量是一种使用方便的占位...

3639
来自专栏武军超python专栏

2018-7月19日系统模块字符串操作

每天遇到的新单词: recursion   n:递归 objece      n:对象 maximum     adj:最大值 exceed      ...

1253
来自专栏浪淘沙

Python学习总结3--Python基础

    a = 100 if a >= 0:     print(a) else:     print(-a) 其中,#为注...

1091
来自专栏五毛程序员

C++知识点整理——持续更新

2144
来自专栏前端儿

PHP--正则表达式和样式匹配--小记

POSIX 风格的,有些低版本软件支持,目前高版本的有些已经废弃不用了,比如 zend studio 的较新版本.

1721
来自专栏python成长之路

函数的不定长参数

1412
来自专栏进击的君君的前端之路

JavaScript基础笔记

2474
来自专栏互联网杂技

JavaScript 10分钟入门

简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 1、修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 2、提供...

35610

扫码关注云+社区

领取腾讯云代金券