快捷導(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)文章

Angular.js通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果
這篇文章主要給大家介紹了關(guān)于Angular.js如何通過自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
2017-10-10
Angular4 組件通訊方法大全(推薦)
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
AngularJS中transclude用法詳解
這篇文章主要介紹了AngularJS中transclude用法,詳細(xì)分析了transclude的具體功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-11-11
AngularJS中$http的交互問題
本篇文章主要介紹了AngularJS中$http的交互問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-03-03
Angular和百度地圖的結(jié)合實(shí)例代碼
最近在angular的項(xiàng)目，但是我用直接引用百度地圖的方法引進(jìn)js,寫html,js代碼，發(fā)現(xiàn)報(bào)錯(cuò)，接下來通過本文給大家介紹angular和百度地圖的結(jié)合,需要的朋友可以參考下
2016-10-10
angularjs使用directive實(shí)現(xiàn)分頁組件的示例
本篇文章主要介紹了angularjs使用directive實(shí)現(xiàn)分頁組件的示例，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-02-02
Angular2 http jsonp的實(shí)例詳解
這篇文章主要介紹了Angular2 http jsonp的實(shí)例詳解的相關(guān)資料,希望通過本能幫助到大家，需要的朋友可以參考下
2017-08-08
AngularJS實(shí)現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的2048小游戲,可實(shí)現(xiàn)通過鍵盤W、S、A、D鍵控制上下左右移動(dòng)進(jìn)行游戲的功能,涉及AngularJS頁面元素動(dòng)態(tài)操作及數(shù)值運(yùn)算等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2018-01-01
AngularJS基礎(chǔ) ng-cut 指令介紹及簡單示例
本文主要介紹AngularJS ng-cut 指令,這里對(duì)ng-cut指令的基礎(chǔ)資料進(jìn)行了整理,和詳細(xì)介紹,并附上代碼示例和實(shí)現(xiàn)效果圖,學(xué)習(xí)AngularJS 指令的朋友可以參考下
2016-08-08
Angular?Component屬性綁定target和attr.target的區(qū)別分析
這篇文章主要介紹了Angular?Component屬性綁定target和attr.target的區(qū)別分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07