angularjs探秘<五> 举足轻重的scope

scope在angular中的作用可谓举足轻重，不理解scope就不会angular；

scope是应用在 HTML (view) 和 JavaScript (controller)之间的纽带。

scope是一个js对象(pojo)，有可用的方法和属性(即定义在controller中的所有属性和函数)。

对于scope的定义和作用在第三篇有提到过。

scope在定义controller时首先被注入，然后作为参数被引用，controller中的所有属性和函数皆以scope为对象声明的属性和函数，在view(HTML)中使用controller的属性及函数都不需要加scope

    <div ng-controller="contr_1">
        <ul ng-repeat="x in list">
            <li ng-bind="x"></li>
        </ul>
    </div>

MyApp.controller("contr_1",["$scope",function($scope){
    $scope.list=['html','javascript','jquery','css','angularjs'];
    $scope.c1_title="标题C1";
}]);

========================================================================================================================================

scope的作用范围

先看个例子：

MyApp.controller("contr_1",["$scope",function($scope){
    $scope.c1_title="标题C1";
}]);

MyApp.controller("contr_2",["$scope",function($scope){
    $scope.c2_title="标题C2";
}]);

    <div ng-controller="contr_1">
        <h1 ng-bind="c1_title"></h1>    <!--显示 标题C1-->
    </div>
    <div ng-controller="contr_2">
        <h1 ng-bind="c1_title"></h1>    <!--不显示-->
        <h1 ng-bind="c2_title"></h1>    <!--显示 标题C2-->
    </div>

这个例子中 contr_1 的作用范围仅是 contr_1 所属的div的范围，所以第二个 c1_title 获取不到值scope超出范围了。

========================================================================================================================================

根scope

根scope存在于ng-app上，也就是说ng-app范围有多大，根scope作用范围就有多大；ng-app一个页面有且只有一个，同样根scope也是有且只有一个。

    <div ng-controller="contr_1">
        <h1 ng-bind="c1_title"></h1>    <!--显示 标题C1-->
        <h1 ng-bind="title"></h1>    <!--显示 我是全局scope-->
    </div>
    <div ng-controller="contr_2">
        <h1 ng-bind="title"></h1>    <!--显示 我是全局scope-->
        <h1 ng-bind="c1_title"></h1>    <!--不显示-->
        <h1 ng-bind="c2_title"></h1>    <!--显示 标题C2-->
    </div>
<!--js-->
MyApp.controller("contr_1",["$scope","$rootScope",function($scope,$rootScope){
    $scope.c1_title="标题C1";
    $rootScope.title="我是全局scope";
}]);

MyApp.controller("contr_2",["$scope",function($scope){
    $scope.c2_title="标题C2";
}]);

这里尽管 $rootScope 在 contr_1 中定义其属性，但在全局都能使用$rootScope定义的属性；$rootScope有且只有一个，若有多个同名属性或函数，默认取最后一个属性或函数。

转载于:https://www.cnblogs.com/MirageFox/p/7767566.html