Angular 作用域scope的具体使用

站长资源 2024/11/28 佚名

2 0 1

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

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

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

$rootScope

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

$scope

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

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

一、变量的取值和赋值

<div ng-controller="parentCtrl">
 <span>{{number}}</span>
 <div ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </div>
</div>

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

效果：

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

分析：

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

解决：

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

 <div ng-controller="parentCtrl">
  <span>{{number}}</span>
  <div ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </div>
 </div>

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

 <div ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <div ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </div>
 </div>
 
 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: "<div class='my-directive'>" +
  "我的名字是：<span ng-bind='name'></span><br/>" +
  "我的年龄是：<span ng-bind='age'></span><br/>" +
  "在这里修改名字：<input type='text' ng-model='name'><br/>" +
  "<button ng-click='changeAge()'>修改年龄</button>" +
  " </div>"
}

①scope：false

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

②scope：true

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

③scope：{}

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

<div my-directive my-name="{{name}}"></div>

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

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

<div my-directive age="age"></div>

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

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

<div my-directive change-my-age="changeAge()"></div>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Angular,作用域,Angular,scope

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Angular 作用域scope的具体使用”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Angular 作用域scope的具体使用

react实现菜单权限控制的方法

angularjs实现柱状图动态加载的示例

评论“Angular 作用域scope的具体使用”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接