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

2023-07-12,,

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

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

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

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

1、创建一个新的作用域对象,但不继承父作用域  (创建、不继承)

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

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

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

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

<p>我的名字是:{{ name }}</p>  <!-- 常量 -->
<p>我的年龄是:{{ age }}</p> <!-- 变量 -->
<p><button ng-click="greeting()">称呼</button></p> <!-- 方法 -->
<input type="text" ng-model="name" />
<br /><br />

scope:false (跟父作用域共享一个作用域的时候)

<!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>指令1 scope=false:</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==false */
app.directive('myDirective',[function(){
return{
restrict:'AE',
scope:false,
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>

测试的时候注意angularjs的版本问题。

这个很容易理解,两个同时改变,因为用的是同一个作用域,用的是同一个变量。

scope:true (从父作用域继承并创建一个新的作用域对象)

<!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>指令1 scope=true:</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:true,
templateUrl:'scopeTemplate.html'
}
}])
</script>
</html>

这块有一点需要注意下,

刷新——>输入第一个,第二个会跟着变——>输入第二个,第一个不变——>再输入第一个,第二个也不变了(之后两个互不影响)

刷新——>输入第二个,第一个不变——>输入第一个,第二个不变(之后两个互不影响)

也就是说,如果我们不在第二个输入框输入,也就不会在指令新建的作用域对象中创建新的变量,它每次显示的就是在父作用域中查询到的值

一旦输入,就已经在该对象下新建了一个变量。(这块跟js变量作用域的查找是一样的)

再看第三个 scope:{}

书上说这块叫隔离作用域,隔离.....也就是我是一个新的个体,跟外界没关系

前面说 scope:false 和scope:true的 本质区别是创不创建新的作用域对象,而不是继不继承的问题。

那么这里scope:{}和scope:true的 本质区别是继不继承父作用域的问题,而不是创不创建新的作用域对象的问题。


scope:{} (创建一个新的作用域对象,但不继承父作用域)

<!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>

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

 

angularjs指令中scope参数 true、false、{} 的区别详解的相关教程结束。

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

下载本文的Word格式文档,以方便收藏与打印。