[AngularJS] $Scope 介紹
$Scope
$scope可以用來綁定View(HTML)與Controller(JavaScript)。
$scope是一個物件,該物件有著屬性與方法,並作用於View與Controller。
如何使用 $Scope
當建立AngularJS的Controller時,可以使用$scope來傳遞參數:
<div ng-app="myCar" ng-controller="CarCtrl">
<h1>我的車是{{Car}}</h1>
</div>
<script>
var app = angular.module('myCar', []);
app.controller('CarCtrl', function ($scope) {
$scope.Car = "LEXUS";
});
</script>
當在Controller加入$scope屬性($scope.Car)時,View (HTML)也能獲取這些屬性。
在View顯示屬性時,只需要在表達式中加入屬性的名稱即可,如<h1>我的車是{{Car}}</h1>。
$Scope 概述
AngularJS的組成如下:
- View : HTML.。
- Model : 當前View中可使用的資料。
- Controller : JavaScript的function,可以建立/修改/移除/控制資料。
$scope即是模型。
$scope是一個帶有屬性與方法的JavaScript物件。而這些屬性與方法可以在View和Controller中使用。
假如在View做變更,Model與Controller也會跟著改變。改寫上面的程式如下:
<div ng-app="myCar" ng-controller="CarCtrl">
<input type="text" ng-model="Car" />
<h1>我的車是{{Car}}</h1>
</div>
<script>
var app = angular.module('myCar', []);
app.controller('CarCtrl', function ($scope) {
$scope.Car = "LEXUS";
});
</script>
$rootScope
所有的應用都有一個$rootScope,可以作用在有ng-app指令的HTML元素裡。
以下為相同的變數名稱在Controller的$scope與$rootScope:
<body ng-app="myApp">
<p>$rootScope的值為:</p>
<h1>{{variable}}</h1>
<div ng-controller="myCtrl">
<p>Controller的$Scope值為:</p>
<h1>{{variable}}</h1>
</div>
<p>$rootScope的值為:</p>
<h1>{{variable}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function ($rootScope) {
$rootScope.variable = "$rootScope";
});
app.controller('myCtrl', function ($scope) {
$scope.variable = "myCtrl的$scope";
});
</script>
</body>