AngularJs 为指令的参数scope提供了三种选择，分别是false，true，{}
默认情况下是false
首先看一下，当scope=false;
<div ng-app="myApp" ng-controller="myCtrl">
<p>我的名字： {{name}}</p>
<p>我的年龄: {{ age }}</p>
<p my-directive></p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "张三";
$scope.age = 20;
});
app.directive("myDirective", function() {
return {
restrick: "AE",
scope: false,
repace: true,
template: "<div>通过指令生成的" +
"<p>name: {{name}}</p>" +
"<p>年龄: {{age}}</p>" +
"<input type='text' ng-model='name'/><br>" +
"<input type='text' ng-model='age'/><br>" +
"</div>"
}
});
</script>
通过实例发，修改name和age值它们随之都会发生改变，这是因为他们同一作用域，绑定的值都是name和age，所有修改任意一个都会发生变化
scope=true的效果：
<div ng-app="myApp" ng-controller="myCtrl">
<p>我的名字： {{name}}</p>
<p>我的年龄: {{ age }}</p>
<p my-directive></p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "张三";
$scope.age = 20;
});
app.directive("myDirective", function() {
return {
restrick: "AE",
scope: true,
repace: true,
template: "<div>" +
"<p>name: {{name}}</p>" +
"<p>age: {{age}} </p>" +
"<input type='text' ng-model='name'/><br>" +
"<input type='text' ng-model='age'/><br>" +
"<div>"
}
});
当scope=true时，此时修改name和age，就不会改变了，
这是因为，scope形成了自己的作用域，他们的数据模型已经不是同一数据模型，所有修改自定义指令的内容不会影响controller作用域中的数据。
scope={}时，
<div ng-app="myApp" ng-controller="myCtrl">
<p>我的名字： {{name}}</p>
<p>我的年龄: {{ age }}</p>
<!-- <p my-directive></p> -->
<p username={{name}} age="age" change="changeAge()" my-directive></p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "张三";
$scope.age = 30;
$scope.changeAge = function() {
$scope.age = 35;
};
});
app.directive("myDirective", function() {
return {
restrick: "AE",
replace: true,
scope: {
name: "@username",//单数据绑定
age: "=age",//双向数据绑定
changeAge: "&change"//绑定函数
//scope对象的键对值，键是绑定名字即contoller的$scope对象的名字，值是添加html的属性名
},
template: "<div>" +
"输入名：<input type='text' ng-model='name'>" +
"输入年龄:<input type='text' ng-model='age'>" +
"<button ng-click='changeAge()'>修改年龄</button>"
}
});
- @ 数据双向绑定前缀标识符，在元素属性中使用，例如此列中username = {{name}} 通过username的值调用绑定在$scope的数据 @绑定处理是字符串
- = 数据双绑定 ，在元素中使用，age="age", 双向绑定的数据可修改，不能是{{}}; 传递的是对象
- & 函数绑定。在元素中使用，change=changeAge() 传递的是函数指令如何同前缀表示寻找需要的属性和函数
