您的位置：首页 > Web前端 > AngularJS

angularjs指令中scope参数 true、false、{} 的区别详解

2017-03-11 12:41 621 查看

scope 有三个参数 true、false、{}

scope 默认是 false，当scope设置为true时，会从父作用域继承并创建一个新的作用域对象，

按照true 、false的反向思维，我就理解为scope不设置，或者设置为false的时候，就不从父作用域继承（理解错误[b]主要就是因为这句话[/b]）。

这里的不从父作用域继承可以分为两种情况

1、创建一个新的作用域对象，但不继承父作用域（创建、不继承）

2、压根就不创建新的作用域对象，直接跟父作用域共享一个作用域，也就谈不到继承了。（不创建、直接用、谈何继承）

弄清楚这个我就明白了，scope:false 和scope：true的本质区别是创不创建新的作用域对象，而不是继不继承的问题。

放几个例子，代码不多，直接写在一个里面了：

指令中的templateUrl共用一个模板：scopeTemplate.html

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<div ng-controller="myController">
<p>我的名字是：{{ name }}</p>  <!-- 常量 -->
<p>我的年龄是：{{ age }}</p>   <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p>  <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />
<p>指令 scope={}：</p>
<div my-directive></div>
</div>
</body>

<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('myController',['$scope',function($scope){
$scope.name = "wanglehui";
$scope.age = 23;
$scope.greeting = function(){
alert('我叫'+$scope.name);
}
}])

/* 指令2 scope==true */
app.directive('myDirective',[function(){
return{
restrict:'AE',
scope:{},
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>

View Code

如果想要scope{}中的变量与父作用域绑定, 就会用到angularjs中的绑定策略“@”，“=”，“&”

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航