Angular中scope作用域如何使用-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Angular中scope作用域如何使用-创新互联

今天就跟大家聊聊有关Angular中scope作用域如何使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联2013年开创至今,是专业互联网技术服务公司,拥有项目成都做网站、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元绥滨做网站,已为上家服务,为绥滨各地企业和个人服务,联系电话:13518219792

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

$rootScope

每个AngularJs应用默认有一个根作用域--$rootScope, 根作用域位于最顶层,作为其他作用域的父作用域,可作用于整个应用中。

$scope

scope(作用域)对应MVC模式的Model,是应用在HTML(视图)和JavaScript(控制器)之间的纽带,可应用在视图和控制器上。

scope是表达式执行的上下文,同时作用域也是一个对象,有可用的方法和属性。

一、变量的取值和赋值


 {{number}}
 
  {{number}}
  增加
 
function parentCtrl($scope){  $scope.number = 1; } function childCtrl($scope){  }

效果:

界面上显示了两个1,但当我们点击按钮之后,childCtrl作用域内的数据改变了,parentCtrl作用域内的数据没有改变

分析:

①childCtrl作用域继承了parentCtrl作用域(类似于JavaScript的原型链继承),所以childCtrl作用域可以访问到parentCtrl的内容。
②点击按钮后childCtrl作用域就会创建一个number基础类型变量,当childCtrl已有某个基础类型变量就不会访问原型链。

解决:

①可以使用$parent来指定上级作用域改变

 
  {{number}}
  
   {{number}}
   增加
  
 

②使用引用类型变量,内外层作用域均是data对象的引用,修改对象的属性,引用的还是同一个变量。

 
  {{data.number}}
  
   {{data.number}}
   增加
  
 
 
 function parentCtrl($scope){
  $scope.data.number = 123';
 }
 function childCtrl($scope){
  
 }

ng-if、ng-repeat、ng-switch、ng-include等指令也会产生新作用域

二、Directive中的作用域

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "" +
  "我的名字是:
" +   "我的年龄是:
" +   "在这里修改名字:
" +   "修改年龄" +   " " }

①scope:false

当scope设置为false的时候,我们创建的指令和父作用域(其实是同一个作用域)共享同一个model模型,所以在指令中修改模型数据,它会反映到父作用域的模型中。

②scope:true

当scope设置为true的时候,我们就新创建了一个作用域,只不过这个作用域是继承的父作用域;可以这样理解,我们新创建的作用域是一个新的作用域,只不过在初始化的时候,用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

③scope:{}

@ 这是一个单项绑定的前缀标识符

属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

= 这是一个双向数据绑定前缀标识符

数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。

& 这是一个绑定函数方法的前缀标识符

属性的名字要用-将多个个单词连接。

看完上述内容,你们对Angular中scope作用域如何使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:Angular中scope作用域如何使用-创新互联
本文来源:http://kswsj.cn/article/hsjcj.html

其他资讯