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则定义可复用的行为。

posted @ 2015-05-25 14:46  小数  阅读(537)  评论(0编辑  收藏  举报