AngularJs中$scope和$rootscope的區別

時間 2019-12-11

標籤 angularjs scope rootscope 區別欄目 AngularJS 简体版

原文原文鏈接

scope 是一個 JavaScript 對象，帶有屬性和方法，這些屬性和方法能夠在視圖和控制器中使用。javascript

全部的應用都有一個 $rootScope，它能夠做用在 ng-app 指令包含的全部 HTML 元素中。css

$rootScope 可做用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，能夠在各個 controller 中使用。html

例：java

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>AngularJs學習(7)</title>
</head>
<body>
<h1>Scope</h1>
<div ng-app="myApp">
	<div ng-controller="myCtrl1">
		<h2>{{carname}}</h2>
	</div>

	<div ng-controller="myCtrl2">
		<ul>
			<li ng-repeat="x in names">{{ x }}</li>
		</ul>		
	</div>

</div>

<!-- 直接引用別的網站託管的angularjs -->
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.4/angular.min.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl1", function($scope, $rootScope){
	$scope.carname = "BMW"
	$rootScope.names = ["Emil", "Tobias", "Linus"];//在myCtrl1中定義全局的rootScope
});
app.controller("myCtrl2", function($scope, $rootScope){
	$scope = $rootScope;//能夠在同一ng-app的myCtrl2中使用rootScope

});
</script>
</body>
</html>

代碼效果：angularjs

相關標籤/搜索