AngulaJs -- 隔离作用域

具有隔离作用域的指令最主要的使用场景是创建可复用的组件

创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的

模板就无法访问外部作用域了：

<div ng-controller='MainController'>
Outside myDirective: {{ myProperty }}
<div my-directive ng-init="myProperty = 'wow, this is cool'">
Inside myDirective: {{ myProperty }}
</div>
</div>
angular.module('myApp', [])
.controller('MainController', function($scope) {
})
.directive('myDirective', function() {
return {
restrict: 'A',
scope: {},
priority: 100,
template: '<div>Inside myDirective {{ myProperty }}</div>'
};
});

*1. $scope

与指令元素相关联的当前作用域。

*2. $element

当前指令对应的元素。

*3. $attrs

由当前元素的属性组成的对象。例如，下面的元素：

<div id="aDiv"class="box"></div>

具有如下的属性对象：

{
id: "aDiv",
class: "box"
}

*4. $transclude

嵌入链接函数会与对应的嵌入作用域进行预绑定。transclude链接函数是实际被执行用来克隆元素和操作DOM的函数。在控制器内部操作DOM是和AngularJS风格相悖的做法，但通过链接函数就可以实现这个需求。仅在compile参数中使用transcludeFn是推荐的做法。例如，我们想要通过指令来添加一个超链接标签。可以在控制器内的$transclude函数中实

现，如下所示：

angular.module('myApp')
 .directive('link', function() {
   return {
    restrict: 'EA',
    transclude: true,
    controller:
        function($scope, $element, $transclude, $log) {
            $transclude(function(clone) {
                var a = angular.element('<a>');
                a.attr('href', clone.text());
                a.text(clone.text());
                $log.info("Created new a tag in link directive");
                $element.append(a);
        });
    }
};
});

指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为，但链接函数只能在当前内部指令中定义行为，且无法在指令间复用。

link函数可以将指令互相隔离开来，而controller则定义可复用的行为。