AngularJs Scope(做用域)

Scope(做用域)是應用在HTML(視圖)和Javascript(控制器)之間的紐帶.

Scope是一個對象，有可用的方法和屬性.

Scope能夠應用在視圖和控制器上.

如何使用Scope

當你在AngularJs中建立控制器時，你能夠將$scope對象看成一個參數傳遞：

    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{{carname}}</h1>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.carname = "重走老街";
        })
    </script>

當在控制器中添加$scope對象時，視圖(HTML)就能夠獲取到scope對象的屬性

視圖中，你不須要添加$scope前綴，只須要添加屬性名便可，如：{{carname}}.

Scope概述：

AngularJs應用組成以下：

1.View (視圖),即HTML;

2.Model(模型),當前視圖可用的數據;

3.Controller(控制器),即javascript函數，能夠添加和修改屬性和方法

4.Scope是模型，是一個javascript對象，有屬性和方法，這些屬性和方法在視圖和控制器中均可以使用。

若是修改了視圖，那麼模型和控制器也會相應更新，案例：

    <div ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name">
        <h1>{{greeting}}</h1>
        <button ng-click="sayHello()">點我問候</button>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.name = "重走老街";
            $scope.sayHello = function () {
                $scope.greeting = "Hello " + $scope.name +"!";
            }
        })
    </script>

Scope的做用範圍：

在大型項目中，HTML DOM中有多個做用域，這是須要知道你是用的scope對應的做用域是哪個。

根做用域

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

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

建立控制器的時候，將$rootScope做爲參數傳遞，可在應用中使用：

<div ng-app="myApp" ng-controller="myCtrl">
        <h1>家族成員</h1>
        <ul>
            <li ng-repeat="x in names">{{x}} {{lastname}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope,$rootScope){
            $scope.names = ["重走老街","Tobias","Linus"];
            $rootScope.lastname = "Refsnes";
        })
    </script>