淺談AngularJs指令之scope屬性詳解
AngularJS使用directive()方法類定義一個(gè)指令：
.directive("name",function(){
return{
};
})
上面是定義一個(gè)指令的主體框架，該方法接受兩個(gè)參數(shù)：
1、第一個(gè)參數(shù)：name表示定義的指令的名稱（angularjs會(huì)用這個(gè)name注冊(cè)這個(gè)指令）
2、第二個(gè)參數(shù)：函數(shù)，該番薯必須返回一個(gè)對(duì)象或者一個(gè)函數(shù)，但通常我們會(huì)返回一個(gè)對(duì)象。return后接的就是返回的對(duì)象。
在返回的對(duì)象中有一個(gè)scope屬性，這個(gè)屬性用來(lái)修飾指令的作用域。
每次在注冊(cè)一個(gè)指令的時(shí)候，這個(gè)指令都會(huì)考慮一個(gè)問(wèn)題，我們用我自己所在作用域呢，還是創(chuàng)建一個(gè)從父作用域繼承的子作用域呢，
還是創(chuàng)建一個(gè)隔離的作用域呢（不依賴外部的作用域）；
scope屬性的值為false，true，{ } 分別對(duì)應(yīng)著上面的所在作用域，子作用域，隔離作用域。
我們舉三個(gè)例子讓我們徹底明白這幾個(gè)屬性的用法。
1、scope：false
html代碼：
<div ng-controller="myController">
<div>
<span>我的名字是</span><span ng-bind="name"></span><br/>
<span>我的年齡是</span><span ng-bind="age"></span>
<div my-directive></div>
</div>
</div>
<script>
angular.module("app",[])
.controller("myController",function($scope){
$scope.name = "kobe";
$scope.age = 39;
})
.directive("myDirective",function(){
return{
scope:false,
restrict:"A",
template:"<div><h1>下面的部分是我們創(chuàng)建指令時(shí)生成的</h1>"+
"我的名字是:<span ng-bind='name'></span><br/>"+
"我的年齡是:<span ng-bind='age'></span><br/>"+
"輸入你的新名字:<input type='text' ng-model='name'>"+
"</div>"
};
})
</script>
效果：
這時(shí)，指令的作用域是和myController的作用域是相同的，因此當(dāng)我們?cè)谳斎肟蛑休斎胄碌拿謺r(shí)，上下兩處的名字都會(huì)跟著變動(dòng)，如下圖所示：
2、scope：true
這時(shí)剛進(jìn)入頁(yè)面的效果，當(dāng)我們?cè)谳斎肟蜉斎胄碌拿謺r(shí)，就會(huì)發(fā)生和第一個(gè)實(shí)驗(yàn)不一樣的效果，如圖所示：
這里，上部分的名字沒(méi)有發(fā)生改變，而下面的名字發(fā)生了改變。
這個(gè)實(shí)驗(yàn)中，有兩點(diǎn)需要我們注意下：
1、剛進(jìn)入或刷新完頁(yè)面后，上下的名字都是一樣是因?yàn)椋?/strong>scope為true時(shí)，子作用域繼承了父作用的屬性和方法。因此雖然子作用域中沒(méi)有定義name和age，
但是能從父作用域的myController中繼承。因此，上下顯示了相同的名字和年齡。
2、輸入新名字后，上不變、下變得原因是：我們修改的是子作用域上的name和age，因此下面的名字會(huì)改變，上面的名字屬于父作用域，父作用域是不能訪問(wèn)子作用域的，
因此上面的名字的值不會(huì)改變。
3、scope：{ }
指令的scope部分做如下修改：
scope:{
name:"@",
age:"@"
},
這時(shí)，載入頁(yè)面的效果會(huì)變?yōu)椋?/p>
我們會(huì)發(fā)現(xiàn)下面的名字和年齡并沒(méi)有值，這時(shí)因?yàn)楝F(xiàn)在的作用域是隔離的，它并不知道父作用域的屬性和方法。我們可以在指令的后面給其賦值，方法如下：
<div my-directive name="aaa" age="33"></div>
頁(yè)面的載入會(huì)變?yōu)椋?/p>
當(dāng)我們輸入新的名字時(shí)，效果如下
同樣的原因，這個(gè)作用域是完全隔離的，因此修改只對(duì)指令自身的作用域的屬性和方法有效，與其他任何作用域沒(méi)有關(guān)系，myController作用域的名字并不會(huì)改變。
以上就是小編為大家?guī)?lái)的淺談AngularJs指令之scope屬性詳解全部?jī)?nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
本篇文章主要介紹了Angularjs的啟動(dòng)過(guò)程分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了Angular 向組件傳遞模板的兩種方法,第一種方式<ng-content>第二種方式是NgTemplateOutlet 指令及各種使用方式介紹,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題
這篇文章主要介紹了Angular中ng-repeat與ul li的多層嵌套重復(fù)問(wèn)題,需要的朋友可以參考下2017-07-07
使用AngularJS編寫多選按鈕選中時(shí)觸發(fā)指定方法的指令代碼詳解
最近做項(xiàng)目時(shí)遇到了需要用到多選按鈕選中觸發(fā)事件的功能，小編試著手寫一個(gè)指令，具體實(shí)現(xiàn)代碼大家參考下本文吧2017-07-07
解決angularjs中同步執(zhí)行http請(qǐng)求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請(qǐng)求的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
SpringMVC簡(jiǎn)單整合Angular2的示例
這篇文章主要介紹了SpringMVC簡(jiǎn)單整合Angular2的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法
下面小編就為大家分享一篇angularJS的radio實(shí)現(xiàn)單項(xiàng)二選一的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
最近工作中會(huì)經(jīng)常遇到一些公用提示，使用框架自帶很多時(shí)候不方便所以便自己編寫了一個(gè)公共提示模塊，下面這篇文章主要介紹了利用Angular.js編寫公共提示模塊的方法教程，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-05-05
通過(guò)實(shí)例代碼給大家詳細(xì)講述了angular動(dòng)態(tài)表單的制作方法，對(duì)此有需要的朋友參考下。2018-02-02