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>