重慶分公司
重慶分公司
Angular中scope作用域如何使用
今天就跟大家聊聊有關(guān)Angular中scope作用域如何使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、坊子網(wǎng)絡(luò)推廣、小程序定制開發(fā)、坊子網(wǎng)絡(luò)營銷、坊子企業(yè)策劃、坊子品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供坊子建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com
Scope(作用域) 是應(yīng)用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。
Scope 是一個(gè)對象，有可用的方法和屬性。
Scope 可應(yīng)用在視圖和控制器上。
$rootScope
每個(gè)AngularJs應(yīng)用默認(rèn)有一個(gè)根作用域--$rootScope， 根作用域位于最頂層，作為其他作用域的父作用域，可作用于整個(gè)應(yīng)用中。
$scope
scope(作用域)對應(yīng)MVC模式的Model，是應(yīng)用在HTML(視圖)和JavaScript(控制器)之間的紐帶，可應(yīng)用在視圖和控制器上。
scope是表達(dá)式執(zhí)行的上下文，同時(shí)作用域也是一個(gè)對象，有可用的方法和屬性。
一、變量的取值和賦值
{{number}}
{{number}}
增加
function parentCtrl($scope){
$scope.number = 1;
}
function childCtrl($scope){
}
效果：
界面上顯示了兩個(gè)1，但當(dāng)我們點(diǎn)擊按鈕之后，childCtrl作用域內(nèi)的數(shù)據(jù)改變了，parentCtrl作用域內(nèi)的數(shù)據(jù)沒有改變
分析：
①childCtrl作用域繼承了parentCtrl作用域(類似于JavaScript的原型鏈繼承)，所以childCtrl作用域可以訪問到parentCtrl的內(nèi)容。
②點(diǎn)擊按鈕后childCtrl作用域就會(huì)創(chuàng)建一個(gè)number基礎(chǔ)類型變量，當(dāng)childCtrl已有某個(gè)基礎(chǔ)類型變量就不會(huì)訪問原型鏈。
解決：
①可以使用$parent來指定上級作用域改變
{{number}}
{{number}}
增加
②使用引用類型變量，內(nèi)外層作用域均是data對象的引用，修改對象的屬性，引用的還是同一個(gè)變量。
{{data.number}}
{{data.number}}
增加
function parentCtrl($scope){
$scope.data.number = 123';
}
function childCtrl($scope){
}
ng-if、ng-repeat、ng-switch、ng-include等指令也會(huì)產(chǎn)生新作用域
二、Directive中的作用域
.directive("myDirective", function () {
return {
restrict: "AE",
scope: {
name: '@myName',
age: '=',
changeAge: '&changeMyAge'
},
replace: true,
template: "" +
"我的名字是：
" +
"我的年齡是：
" +
"在這里修改名字：
" +
"修改年齡" +
" "
}①scope：false
當(dāng)scope設(shè)置為false的時(shí)候,我們創(chuàng)建的指令和父作用域（其實(shí)是同一個(gè)作用域）共享同一個(gè)model模型，所以在指令中修改模型數(shù)據(jù)，它會(huì)反映到父作用域的模型中。
②scope：true
當(dāng)scope設(shè)置為true的時(shí)候，我們就新創(chuàng)建了一個(gè)作用域，只不過這個(gè)作用域是繼承的父作用域；可以這樣理解，我們新創(chuàng)建的作用域是一個(gè)新的作用域，只不過在初始化的時(shí)候，用了父作用域的屬性和方法去填充我們這個(gè)新的作用域。它和父作用域不是同一個(gè)作用域。
③scope：{}
@ 這是一個(gè)單項(xiàng)綁定的前綴標(biāo)識(shí)符
屬性的名字要用-將兩個(gè)單詞連接，因?yàn)槭菙?shù)據(jù)的單項(xiàng)綁定所以要通過使用{{}}來綁定數(shù)據(jù)。
= 這是一個(gè)雙向數(shù)據(jù)綁定前綴標(biāo)識(shí)符
數(shù)據(jù)的雙向綁定要通過=前綴標(biāo)識(shí)符實(shí)現(xiàn)，所以不可以使用{{}}。
& 這是一個(gè)綁定函數(shù)方法的前綴標(biāo)識(shí)符
屬性的名字要用-將多個(gè)個(gè)單詞連接。
看完上述內(nèi)容，你們對Angular中scope作用域如何使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
分享名稱：Angular中scope作用域如何使用
本文路徑：http://weahome.cn/article/gpogie.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
