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

angularjs探秘五举足轻重的scope相关推荐

JavaScript文件中调用AngularJS内部方法或改变$scope变量
需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定: 首先获取AngularJS application: 方法一:通过controll ...
Javascript教程：AngularJS的五个超酷特性
日期:2012-7-17 来源:GBin1.com AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色.在这篇教程中,我们将简单 ...
精通AngularJS（三）深入scope，继承结构，事件系统和生命周期
深入探讨 Scope 作用域每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构让 ...
AngularJS学习笔记之directive—scope选项与绑定策略
From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...
angularjs源码笔记(4)--scope
2019独角兽企业重金招聘Python工程师标准>>> 简介在ng的生态中scope处于一个核心的地位,ng对外宣称的双向绑定的底层其实就是scope实现的,本章主要对scope的 ...
MySQL探秘(五):InnoDB锁的类型和状态查询
锁是数据库系统区分于文件系统的一个关键特性.数据库使用锁来支持对共享资源进行并发访问,提供数据的完整性和一致性.此外,数据库事务的隔离性也是通过锁实现的.InnoDB在此方面一直优于其他数据库引擎.I ...
jvm探秘五：Class类文件结构之属性表
概述在Class文件.字段表和方法表都可以携带自己的属性信息,这个信息用属性表进行描述,用于描述某些场景专有的信息. 与Class文件中其它数据项对长度.顺序.格式的严格要求不同,属性表集合不要求其 ...
AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的 ...
观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）
一. phonegap 性能优化以及 phonegap + Angularjs +ionic 1.安装包括:nodejs-cordova-ionic,sdk,phonegap等等: 2.怎样吧导航设 ...

angularjs探秘五举足轻重的scope

angularjs探秘五举足轻重的scope相关推荐

最新文章

热门文章

angularjs探秘五 举足轻重的scope

angularjs探秘五 举足轻重的scope相关推荐

最新文章

热门文章

angularjs探秘五举足轻重的scope

angularjs探秘五举足轻重的scope相关推荐