AngularJs之$scope對象（做用域）

時間 2019-11-17

原文原文鏈接

1、做用域javascript

AngularJs中的$scope對象是模板的域模型,也稱爲做用域實例.經過爲其屬性賦值,能夠傳遞數據給模板渲染.html

每一個$scope都是Scope類的實例,Scope類有不少方法,用於控制做用域的生命週期、提供事件傳播功能,以及支持模板的渲染等.java

AngularJs的每一個應用程序都有一個$rootScope,它是其餘全部做用域的父做用域,它的做用範圍從包含ng-app指令的HTML元素開始.它是在新應用啓動時自動建立.angularjs

2、指令建立做用域app

ng-controller指令是做用域建立指令,當在DOM樹中遇到做用域建立指令時,AngularJs都會建立Scope類的新實例$scope.新建立的做用域實例$scope會擁有$parent屬性,並指向它的父做用域.在DOM樹中,會有不少這樣的指令建立出不少做用域.測試

(衆多做用域造成了以$rootScope爲根的樹結構,鑑於DOM樹驅動了做用域的建立,做用域樹模仿了DOM樹的結構)spa

ng-repeat指令的運用:3d

<!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>
		世界人口數：{{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.jshtm

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},
	];
});

測試結果：對象

ng-repeat指令用來遍歷屬性值,上面對應每一個country,都有個新變量要暴露給$scope,而又沒有覆蓋以前變量的值;AngularJs中給集合中的每一個元素都建立了新的做用域,因此在不一樣做用域中,定義同名變量,不會形成命名的衝突(不一樣的DOM元素指向不一樣的做用域,並使用各自做用域中的變量渲染模板).這至關於集合中每一個項目都有本身的命名空間.

3、做用域層級和繼承

做用域中定義的屬性對於全部子做用域是可見的，只要子做用域中沒有定義同名的屬性.

實例：

<!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";
});

結果：

在父做用域中定義了變量，子做用域中暫時未定義同名變量,能夠看到在父做用域中定義的變量在整個應用程序中處處可見.

若是子做用域中有同名屬性：

AngularJs中的做用域繼承和JavaScript中的原型繼承遵循一樣的規則（沿着繼承樹向上查找屬性，直至找到爲止）。

改變子做用域中的變量值，不會對負做用域中的同名變量產生影響。

經過下面的方式可讓子做用域中影響定義在父做用域中的屬性：

可是這種方式是不可靠的，問題在於ng-model指令所用的表達式對DOM結構作了武斷的假設,儘可能避免使用$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";
});

結果：

改變表單中的值結果以下：

避免直接綁定變量給做用域屬性，對象屬性的雙向數據綁定是最好的解決方案。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。