快捷導(dǎo)航

淺談angularJS 作用域

更新時(shí)間：2015年07月05日 10:47:45 投稿：hebedich

這篇文章主要介紹了淺談angularJS 作用域的相關(guān)資料,需要的朋友可以參考下

<!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中輸入值自己動(dòng)同步到子input中
但是反之不行。即子中修改，無法改變父中的值，且導(dǎo)致父修改后子也不同步了，原因：在子作用域input輸入內(nèi)容時(shí)，
因?yàn)?HTML 代碼中 model 明確綁定在 childCtrl 的作用域中，因此 AngularJS 會(huì)為 childCtrl 生成一個(gè) args 原始類型屬性。
根據(jù) AngularJS 作用域繼承原型機(jī)制，childCtrl 在自己的作用域找到args屬性值，故就不從父中查找args值。
導(dǎo)致最終子作用域有args，父作用域有args，子和父之間的值不會(huì)再保持同步。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

使用AngularJS創(chuàng)建自定義的過濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下
2015-06-06
使用Angular內(nèi)置模塊進(jìn)行HTTP請(qǐng)求
這篇文章主要介紹了使用Angular內(nèi)置模塊進(jìn)行HTTP請(qǐng)求方法步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
Angularjs2不同組件間的通信實(shí)例代碼
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ì)，對(duì)大家學(xué)習(xí)或者使用angular組件具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問題的方法
這篇文章為大家分享了解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問題的方法，感興趣的小伙伴們可以參考一下
2015-12-12
Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例
這篇文章主要介紹了Angular指令封裝jQuery日期時(shí)間插件datetimepicker實(shí)現(xiàn)雙向綁定示例，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01
AngularJS入門教程之AngularJS 模板
本文主要介紹AngularJS 模板，這里整理了詳細(xì)相關(guān)資料，并附示例代碼，有興趣的小伙伴可以參考下
2016-08-08
AngularJS中的模塊詳解
這篇文章主要介紹了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