angularjs学习第八天笔记（指令作用域研究）
原创angularjs学习第八天笔记（指令作用域研究）
原创
小小许
修改于 2018-08-31 09:42:12
修改于 2018-08-31 09:42:12
您好，在前两天对指令的简单了解和系统指令学习后
今天主要研究其指针作用域的相关事情
每一个指令在创建时，其实就构成了自己的一个小的模块单元。
其对于的模块单元都有着其对于的作用域，其中作用域一般有两种情况：
其一、继承父级作用域；其二、自己完全独立开辟一个新的作用域。
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>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读