angularjs指令--隔离作用域

指令的作用域介绍：通常，隔离指令的scope会带来很多的便利，尤其是你要操作多个scope模型的时候，但有时为了使代码能够正确工作，你也需要从指令内部访问scope的属性。作用域表现形式有两种：

scope: false/true，默认是false
scope: {} 隔离作用域，这里又有三种策略 @ = &
scope布尔型

默认值为false，表示从父作用域继承过来。为true，表示从父作用域继承并创建一个新的作用域对象。如果一个元素上有多个指令使用了隔离作用域，其中只有一个可以生效。只有指令模板中的根元素可以获得一个新的作用域。ng-controller就是从父极作用域继承并创建一个新的子作用域。
```
<div ng-controller='myCtrl'>
{{test}}
</div>
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.test = 'test';
});
```

scope对象

当scope是一个对象的时候，指令的作用域与父极作用域就被隔开了。隔离作用域可能是最难理解的，但也是功能最强大的。具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件在未知的上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

scope: {} 将scope设置为一个空对象，这样，指令的模板就无法访问外部作用域了
```
app.directive('helloWorld', function() {
return {
scope: {},
restrict: 'AE',
replace: true,
template: '<p>{{hello}}</p>'
};
});
```
页面使用指令：
```
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world/>
</body>
```
这里的hello-world指令是不生效的，因为我们使用了隔离作用域，指令模板的作用域是无法访问外部controller的作用域。

接下来描述指令的绑定策略：

scope: {@} @ 将本地作用域和DOM中的属性值绑定起来；在html中，{{property}}表达式被指定到attr属性，当表达式发生变化时，attr属性也跟着变化，隔离scope中对应的属性也相应的变化。
```
app.directive('helloWorld', function() {
return {
scope: {
  color: '@colorAttr'
}
};
});
```
指令使用：
```
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color-attr="{{color}}"/>
</body>
```
这种方式称为单项绑定，因为这种绑定策略，你只能使用表达式传递给属性，通过scope隔离作用域传递给内部的属性。当父scope的属性发生变化时，你的隔离scope中的属性也跟着变化，也可以在指令内部监控属性的变化，并且触发一些任务。相反，你不能通过指令内部属性的变化来改变父scope的作用域。
scope: {=} 通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定，就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。
```
app.directive('helloWorld', function() {
return {
scope: {
  color: '='
}
};
});
```
指令使用：
```
<body ng-controller="MainCtrl">
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color="color"/>
</body>
```
这种策略称为双向绑定。双向绑定使用的都是对象的引用，而不是字符串。

scope: {&} 通过&符号可以对父极作用域进行绑定，以便在指令模板中运行函数；如果要调用一个参数的方法，需要传递一个对象。无参情况

app.directive("direct",function(){
    return{
        restrict: 'ECMA',
        template: '<div>{{ title }}</div>'+'<div><ul><li ng-repeat="x in          contents">{{ x.text }}</li></ul></div>',
        scope:{
          getTitle:'&', 
          getContent:'&'             
     },
        controller:function($scope){ 
           $scope.title=$scope.getTitle();     //调用无参函数  
           $scope.contents=$scope.getContent();    //调用无参函数 
       } 
  } 
})
.controller("nameController",function($scope){
$scope.title="标题";
$scope.contents =[{text:1234},{text:5678}]; 
});

指令使用：

<div ng-controller="nameController">
  <direct get-title="title" get-content="contents"></direct> 
</div>

1.指令的本地属性（即模板里花括号中的属性）需要从本地取值，所以使用了controller选项，而在controller选项中，两个无参方法分别返回了父级scope中的title字符串和contents对象数组。

2.在HTML中，我们把设置了get-title和get-content的属性值为title和contents，这实际上就完成了与父级scope的绑定，因为我们才可以从那儿取得实质的内容。

带参数的方法

app.directive("direct",function(){ 
return{
            restrict: 'ECMA',
            template: '<div><input ng-model="model"/></div>\
<div><button ng-click="show({name:model})">show</button>',
            scope:{
                show:'&'              
            }                      
         }
    })
    .controller("nameController",function($scope){
        $scope.showName=function(name){ 
          alert(name); 
         } 
     });

指令使用：

<div ng-controller="nameController">
      <direct show="showName(name)"></direct> 
</div>

这个例子中，通过模板中的ng-click触发了show函数并将一个叫做model的对象作为name参数传递了进去，而在html中，我们把show的属性值设为showName(name)。

msforest / notebook

angularjs指令--隔离作用域 #2

scope布尔型

scope对象