angularJS学习之路（十九）---自定义指令关于独立作用域
angularJS学习之路（十九）---自定义指令关于独立作用域
wust小吴
发布于 2019-07-08 16:34:23
发布于 2019-07-08 16:34:23
1.首先关于 scope：{} 和scope：true 效果是一样的
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-init="myProperty = 'wow, this is cool'"></div>
Surrounding scope: {{ myProperty }}
<div myInheritScopeDirective="SomeCtrl">
Inside an directive with inherited scope: {{ myProperty }}
</div>
<div myDirective>
Inside myDirective, isolate scope: {{ myProperty }}
</div>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {}
};
});
app.directive('myInheritScopeDirective', function() {
return {
restrict: 'A',
scope: true
};
});
</script>
</body>
</html>2.关于不设置scope：true的时候非独立作用域的效果
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<xingoo></xingoo>
<xingoo></xingoo>
<xingoo></xingoo>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript">
var myAppModule = angular.module("myApp", []);
myAppModule.directive("xingoo", function() {
return {
restrict: 'AE',
template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',
repalce: true
}
})
</script>
</body>
</html>3.关于设置 scope：{} 独立作用域的效果
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<xingoo></xingoo>
<xingoo></xingoo>
<xingoo></xingoo>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript">
var myAppModule = angular.module("myApp", []);
myAppModule.directive("xingoo", function() {
return {
restrict: 'AE',
scope: {},
template: '<div><input type="text" ng-model="username"/>{{username}}</div><br>',
repalce: true
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015年11月23日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读