深入探究AngularJs之$scope對(duì)象（作用域）
這兩天學(xué)習(xí)了AngularJs之$scope對(duì)象這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記。
一、作用域
AngularJs中的$scope對(duì)象是模板的域模型,也稱為作用域?qū)嵗?通過(guò)為其屬性賦值,可以傳遞數(shù)據(jù)給模板渲染.
每個(gè)$scope都是Scope類的實(shí)例,Scope類有很多方法,用于控制作用域的生命周期、提供事件傳播功能,以及支持模板的渲染等.
AngularJs的每個(gè)應(yīng)用程序都有一個(gè)$rootScope,它是其他所有作用域的父作用域,它的作用范圍從包含ng-app指令的HTML元素開始.它是在新應(yīng)用啟動(dòng)時(shí)自動(dòng)創(chuàng)建.
二、指令創(chuàng)建作用域
ng-controller指令是作用域創(chuàng)建指令,當(dāng)在DOM樹中遇到作用域創(chuàng)建指令時(shí),AngularJs都會(huì)創(chuàng)建Scope類的新實(shí)例$scope.新創(chuàng)建的作用域?qū)嵗?scope會(huì)擁有$parent屬性,并指向它的父作用域.在DOM樹中,會(huì)有很多這樣的指令創(chuàng)建出很多作用域.
(眾多作用域形成了以$rootScope為根的樹結(jié)構(gòu),鑒于DOM樹驅(qū)動(dòng)了作用域的創(chuàng)建,作用域樹模仿了DOM樹的結(jié)構(gòu))
ng-repeat指令的運(yùn)用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body >
<ul ng-app="myApp" ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} 有 {{country.population}} 人口
</li>
<hr>
世界人口數(shù)：{{population}}
</ul>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script src="js/myapp.js"></script>
<!--<script type="text/javascript" src="js/angularjs.js" ></script>-->
</html>
myapp.js
var app = angular.module("myApp",[]);
app.controller('WorldCtrl',function($scope){
$scope.population = 7000;
$scope.countries = [
{name: 'France',population:63.1},
{name: 'UK',population: 61.8},
];<br>});
測(cè)試結(jié)果：
ng-repeat指令用來(lái)遍歷屬性值,上面對(duì)應(yīng)每個(gè)country,都有個(gè)新變量要暴露給$scope,而又沒(méi)有覆蓋之前變量的值;AngularJs中給集合中的每個(gè)元素都創(chuàng)建了新的作用域,所以在不同作用域中,定義同名變量,不會(huì)造成命名的沖突(不同的DOM元素指向不同的作用域,并使用各自作用域中的變量渲染模板).這相當(dāng)于集合中每個(gè)項(xiàng)目都有自己的命名空間.
三、作用域?qū)蛹?jí)和繼承
作用域中定義的屬性對(duì)于所有子作用域是可見(jiàn)的，只要子作用域中沒(méi)有定義同名的屬性.
實(shí)例：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-init="name='world'">
<h1>Hello,{{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to:<input type="text" ng-model="name">
<h1>Hello,{{name}}!!</h1>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/controller.js" ></script>
</html>
controller.js
var app = angular.module("myApp",[])
app.controller("HelloCtrl", function($scope) {
// $scope.name = "youyi";
});
結(jié)果：
在父作用域中定義了變量，子作用域中暫時(shí)未定義同名變量,可以看到在父作用域中定義的變量在整個(gè)應(yīng)用程序中到處可見(jiàn).
如果子作用域中有同名屬性：
AngularJs中的作用域繼承和JavaScript中的原型繼承遵循同樣的規(guī)則（沿著繼承樹向上查找屬性，直至找到為止）。
改變子作用域中的變量值，不會(huì)對(duì)負(fù)作用域中的同名變量產(chǎn)生影響。
通過(guò)下面的方式可以讓子作用域中影響定義在父作用域中的屬性：
但是這種方式是不可靠的，問(wèn)題在于ng-model指令所用的表達(dá)式對(duì)DOM結(jié)構(gòu)做了武斷的假設(shè),盡量避免使用$parent。
更好的解決方案：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-init="thing={name:'world'}">
<h1>Hello,{{thing.name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to:<input type="text" ng-model="thing.name">
<h1>Hello,{{thing.name}}!!</h1>
</div>
</body>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/controller.js" ></script>
</html>
var app = angular.module("myApp",[])
app.controller("HelloCtrl", function($scope) {
$scope.name = "youyi";
});
結(jié)果：
改變表單中的值結(jié)果如下：
避免直接綁定變量給作用域?qū)傩?，?duì)象屬性的雙向數(shù)據(jù)綁定是最好的解決方案。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ng-container 是 Angular 2+ 中可用的一個(gè)元素,可以作為結(jié)構(gòu)指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場(chǎng)景,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2024-02-02
前端技術(shù)的發(fā)展是如此之快，各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡(jiǎn)直讓人目不暇接，緊跟時(shí)代潮流，學(xué)習(xí)掌握新知識(shí)自然是不敢怠慢。下面這篇文章主要給大家介紹了AngularJS中run方法的巧妙運(yùn)用,需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
這篇文章主要介紹了AngularJS ng-style中使用filter的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解
今天小編就為大家分享一篇Angular服務(wù)Request異步請(qǐng)求的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
簡(jiǎn)介可以自動(dòng)完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡(jiǎn)介可以自動(dòng)完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06
angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs在多個(gè)控制器中共享服務(wù)數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
下面小編就為大家?guī)?lái)一篇淺談AngularJS中ng-class的使用方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
詳解為生產(chǎn)環(huán)境編譯Angular2應(yīng)用的方法
這篇文章主要介紹了詳解為生產(chǎn)環(huán)境編譯Angular2應(yīng)用的方法,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
AngularJS基礎(chǔ) ng-copy 指令實(shí)例代碼
本文主要介紹AngularJS ng-copy 指令,這里幫大家整理了ng-copy指令的基礎(chǔ)資料,并附有示例代碼和效果圖,有需要的朋友參考下2016-08-08
這篇文章主要介紹了angular1配合gulp和bower使用教程，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01