有三种方法可以在指令中添加scope:
父作用域:这是默认的作用域继承。
指令和它的父(它所在的控制器/指令)作用域是相同的。
因此,对指令内的作用域变量所做的任何更改也会反映在父控制器中。您不需要指定它,因为它是默认值。
子作用域:如果指定该指令的作用域变量为true,则该指令将创建一个继承自父作用域的子作用域。
这里,如果你在指令中改变了作用域变量,它不会反映在父作用域中,但是如果你改变了一个作用域变量的属性,它会反映在父作用域中,因为你实际上修改了父作用域变量。
的例子,
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: true,
link: function(element, scope, attrs){
scope.somvar = "new value"; //doesnot reflect in the parent scope
scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
}
};
});
隔离作用域:当您想要创建不继承于控制器作用域的作用域时使用。
这发生在你创建插件时,因为这使得指令通用,因为它可以放在任何HTML中,不受其父作用域的影响。
现在,如果你不想与父作用域有任何交互,那么你可以将作用域指定为一个空对象。就像,
scope: {} //this does not interact with the parent scope in any way
大多数情况下,情况并非如此,因为我们需要与父作用域进行交互,因此我们希望传递一些值/更改。
为此,我们使用:
1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )
@意味着控制器作用域的变化将反映在指令作用域中,但如果你在指令作用域中修改值,控制器作用域变量将不受影响。
@总是期望映射的属性是一个表达式。这一点非常重要;因为要使“@”前缀起作用,我们需要将属性值包装在{{}}中。
=是双向的,所以如果你改变指令作用域中的变量,控制器作用域变量也会受到影响
&用于绑定控制器作用域方法,以便在需要时从指令中调用它
这里的优点是变量的名称在控制器作用域和指令作用域中不需要相同。
例如,指令作用域有一个变量“dirVar”,它与控制器作用域的变量“contVar”同步。这为该指令提供了强大的功能和通用性,因为一个控制器可以与变量v1同步,而使用相同指令的另一个控制器可以要求dirVar与变量v2同步。
下面是用法示例:
指令和控制器分别是:
var app = angular.module("app", []);
app.controller("MainCtrl", function( $scope ){
$scope.name = "Harry";
$scope.color = "#333333";
$scope.reverseName = function(){
$scope.name = $scope.name.split("").reverse().join("");
};
$scope.randomColor = function(){
$scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: {
name: "@",
color: "=",
reverse: "&"
},
link: function(element, scope, attrs){
//do something like
$scope.reverse();
//calling the controllers function
}
};
});
html(注意@和=的区别):
<div my-directive
class="directive"
name="{{name}}"
reverse="reverseName()"
color="color" >
</div>
这里有一个博客的链接,很好地描述了它。