Open
Description
- false，继承父作用域（默认值），父能影响子，子也能影响父;
- true，继承父作用域，并且创建自己的作用域（子作用域），父能影响子，子不能影响父;
- {}，创建一个全新的隔离作用域，父子互不影响；
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/angular.js"></script>
<body>
<article ng-controller="indexCtrl">
<p>父作用域：</p>
<input ng-model="name" />
<section>
<p>组件作用域：</p>
<wsscat></wsscat>
<wsscat1></wsscat1>
<wsscat2></wsscat2>
</section>
</article>
</body>
<script>
var app = angular.module('wsscat', []);
app.controller('indexCtrl', function($scope) {
$scope.name = 'wsscat';
})
app.directive('wsscat', function() {
return {
restrict: "EAMC",
template: "<p>双向数据绑定<br /><input ng-model='name' /></p>",
scope: false
}
})
app.directive('wsscat1', function() {
return {
restrict: "EAMC",
template: "<p>父影响子，子不能影响父<br /><input ng-model='name' /></p>",
scope: true
}
})
app.directive('wsscat2', function() {
return {
restrict: "EAMC",
template: "<p>互不影响<br /><input ng-model='name' /></p>",
scope: {}
}
})
</script>
<style>
article{
border: 1px solid #009689;
}
section{
border: 1px solid #22FFFF;
}
</style>
</html>
Metadata
Metadata
Assignees
Labels
No labels
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
Wscats commentedon Aug 17, 2016
AngularJS Directive 隔离 Scope 数据交互
Wscats commentedon Aug 17, 2016
html
**=**双向数据绑定，注意此时name属性值的变量要带
{{}}<wsscat2 name="{{name}}"></wsscat2>js
html
**@**当方向影响，父能影响子，但子不能影响父
<wsscat2 name="name"></wsscat2>一定要把绑定的值放在属性上面作为媒介
属性值不能设置为如
data-name的data-前缀的值如果是设置为abc-name等格式
组件里面scope属性传递的对象，里面的name属性值要遵守驼峰的写法