Angular.js之作用域scope'@','=','&'实例详解
什么是scope
AngularJS中，作用域是一个指向应用模型的对象，它是表达式的执行环境。作用域有层次结构，这个层次和相应的DOM几乎是一样的。作用域能监控表达式和传递事件。
在HTML代码中，一旦一个ng-app指令被定义，那么一个作用域就产生了，由ng-app所生成的作用域比较特殊，它是一个根作用域（$rootScope），它是其他所有$Scope的最顶层。
除了用ng-app指令可以产生一个作用域之外，其他的指令如ng-controller，ng-repeat等都会产生一个或者多个作用域。此外，还可以通过AngularJS提供的创建作用域的工厂方法来创建一个作用域。这些作用域都拥有自己的继承上下文，并且根作用域都为$rootScope。
在生成一个作用域之后，在编写AngularJS代码时，$scope对象就代表了这个作用域的数据实体，我们可以在$scope内定义各种数据类型，之后可以直接在HTML中以{{变量名}}方式来让HTML访问到这个变量。
下面通过实例代码给大家介绍angular.js之作用域scope'@','=','&'
<!doctypehtml>
<htmlng-app='myApp'>
<head>
</head>
<body>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<scriptsrc="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<divng-controller="listCtrl"ng-app="myApp">
<inputtype="text"ng-model="color">
<!--<spankidhd-color="color"></span>--><!--@是单项数据绑定，hd-color="{{color}}"作用域隔离，在view中是以模板“{{}}”的形式；=双向绑定，hd-color="color",在view中直接以属性的形式出现-->
<divkidcolor="callback()"></div>
</div>
<scripttype="text/javascript">
varmyApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.color="red";
$scope.callback=function(){
return'awebdeveloper!';
}
});
myApp.directive('kid',function(){
return{
restrict:'AE',
//template:'<divstyle="color:{{color}}">@符号的学习</div>',
template:'<h1>{{color()}}</h1>',
scope:{/*color:"=hdColor"*//*"@hdColor"*/color:'&'}//通过&属性名来调用控制器的函数
}
});
</script>
</div>
</body>
</html>
以上所述是小编给大家介绍的Angular.js之作用域scope'@','=','&'实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！