源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angular 作用域scope的具体使用

  • 时间:2021-05-13 08:20 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angular 作用域scope的具体使用
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 [b]$rootScope[/b] 每个AngularJs应用默认有一个根作用域--$rootScope, 根作用域位于最顶层,作为其他作用域的父作用域,可作用于整个应用中。 [b]$scope[/b] scope(作用域)对应MVC模式的Model,是应用在HTML(视图)和JavaScript(控制器)之间的纽带,可应用在视图和控制器上。 scope是表达式执行的上下文,同时作用域也是一个对象,有可用的方法和属性。 [b]一、变量的取值和赋值[/b]
<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){ 
}
[b]效果:[/b] 界面上显示了两个1,但当我们点击按钮之后,childCtrl作用域内的数据改变了,parentCtrl作用域内的数据没有改变 [b]分析:[/b] ①childCtrl作用域继承了parentCtrl作用域(类似于JavaScript的原型链继承),所以childCtrl作用域可以访问到parentCtrl的内容。 ②点击按钮后childCtrl作用域就会创建一个number基础类型变量,当childCtrl已有某个基础类型变量就不会访问原型链。 [b]解决:[/b] ①可以使用$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等指令也会产生新作用域 [b]二、Directive中的作用域[/b]
.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>
属性的名字要用-将多个个单词连接。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部