淺談angularJS 作用域
<!doctype html>
<html ng-app="firstApp">
<head>
<meta charset="utf-8">
<script src="angular-1.3.0.js"></script>
</head>
<body>
<div ng-controller="parentCtrl">
<input ng-model="args">
<div ng-controller="childCtrl">
<input ng-model="args">
</div>
</div>
<script>
var app=angular.module('firstApp',[]);
app.controller('parentCtrl',function($scope) {
$scope.args = '123';
}).controller('childCtrl', function($scope) {
});
</script>
案例說明：
雖然在 childCtrl 中沒有定義具體的 args 屬性，但是因?yàn)?childCtrl 的作用域繼承自 parentCtrl 的作用域，
因此，childCtrl通過原型鏈 到父作用域args 屬性并設(shè)置到input中。且在父input中輸入值自己動同步到子input中
但是反之不行。即子中修改，無法改變父中的值，且導(dǎo)致父修改后子也不同步了，原因：在子作用域input輸入內(nèi)容時(shí)，
因?yàn)?HTML 代碼中 model 明確綁定在 childCtrl 的作用域中，因此 AngularJS 會為 childCtrl 生成一個(gè) args 原始類型屬性。
根據(jù) AngularJS 作用域繼承原型機(jī)制，childCtrl 在自己的作用域找到args屬性值，故就不從父中查找args值。
導(dǎo)致最終子作用域有args，父作用域有args，子和父之間的值不會再保持同步。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- Angularjs全局變量被作用域監(jiān)聽的正確姿勢
- 詳細(xì)談?wù)凙ngularJS的子級作用域問題
- 關(guān)于angularJs指令的Scope(作用域)介紹
- 詳解JavaScript的AngularJS框架中的作用域與數(shù)據(jù)綁定
- 詳解AngularJS中的作用域
- AngularJS實(shí)現(xiàn)單獨(dú)作用域內(nèi)的數(shù)據(jù)操作
- AngularJS入門教程之Scope(作用域)
- AngularJS Controller作用域
- 詳解angularjs中的隔離作用域理解以及綁定策略
- 詳談AngularJs 控制器、數(shù)據(jù)綁定、作用域
- AngularJS中的作用域?qū)嵗治?/a>
相關(guān)文章
使用AngularJS創(chuàng)建自定義的過濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
使用Angular內(nèi)置模塊進(jìn)行HTTP請求
這篇文章主要介紹了使用Angular內(nèi)置模塊進(jìn)行HTTP請求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
AngualrJs2官方方法是以@Input,@Output來實(shí)現(xiàn)組件間的相互傳值，而且組件之間必須父子關(guān)系，下面給大家提供一個(gè)簡單的方法，實(shí)現(xiàn)組件間的傳值，不僅僅是父子組件，跨模塊的組件也可以實(shí)現(xiàn)傳值2017-05-05
angular組件間通訊的實(shí)現(xiàn)方法示例
這篇文章主要給大家介紹了關(guān)于angular組件間通訊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺接收不到參數(shù)值問題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺接收不到參數(shù)值問題的方法，感興趣的小伙伴們可以參考一下2015-12-12
Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
這篇文章主要介紹了Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
本文主要介紹AngularJS 模板，這里整理了詳細(xì)相關(guān)資料，并附示例代碼，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要介紹了AngularJS中的模塊詳解,本文給出了一個(gè)模塊實(shí)例,需要的朋友可以參考下2015-01-01
AngularJS實(shí)現(xiàn)Input格式化的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
這篇文章主要介紹了AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證及表單驗(yàn)證功能的方法,Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,需要的朋友可以參考下2016-04-04