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>