[AngularJS] $Scope

[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>

在沒有指定ng-controller指令時,變數為$rootScope的值。

而有指令ng-controller="myCtrl"的div標籤中,變數為名為myCtrl的Controller的$scope值。

 

 END 

回目錄