Angular 作用域scope的具体使用

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>

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

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

赞 (0)

相关推荐

  • AngularJS入门教程之Scope(作用域)

    AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <!DOCTYPE html> <html> <head> <me

  • AngularJS 作用域详解及示例代码

    AngularJS 作用域详解及示例代码

    范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s

  • 浅谈angularJS 作用域

    <!doctype html> <html ng-app="firstApp"> <head> <meta charset="utf-8"> <script src="angular-1.3.0.js"></script> </head> <body> <div ng-controller="parentCtrl"> &

  • 关于angularJs指令的Scope(作用域)介绍

    关于angularJs指令的Scope(作用域)介绍

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

  • 详解AngularJS中的作用域

    详解AngularJS中的作用域

    范围扮演其视图连接控制器的角色一个特殊的JavaScript对象.范围包含了模型数据.在控制器,模型数据通过$scope对象访问. <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $s

  • 详解angular中的作用域及继承

    在一些使用angular框架的大型项目中,似乎有很多个controller,而每个controller都有自己的$scope. 1.$rootscope $rootScope顶级作用域,也叫根作用域,类似于window,window的属性在任何子作用域都可以访问.$rootScope则是所有controller进行数据沟通的中间域,即在$rootScope中的数据,在每个controller中都能通过$rootScope.xxx获取到. 2.$scope (1)作用 $scope 就在视图和控制

  • Angular.Js之Scope作用域的学习教程

    scope是什么? 大家都知道在AngularJS 中作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-

  • Angular.js之作用域scope'@','=','&'实例详解

    什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat

  • Angular 作用域scope的具体使用

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. $rootScope 每个AngularJs应用默认有一个根作用域--$rootScope, 根作用域位于最顶层,作为其他作用域的父作用域,可作用于整个应用中. $scope scope(作用域)对应MVC模式的Model,是应用在HTML(视图)和JavaScript(控制器)之间的纽带,可应用在视图和控制器上

  • javascript中的作用域scope介绍

    而在javascript中,变量的作用域是按函数来划分的--变量在某个函数范围内有效.比如: 复制代码 代码如下: var f = false; if(true) { var f = true; } //此时f位于if内,也就是块内,等价于还是全局范围内 alert(f) //所以,结果为true 再如下例: 复制代码 代码如下: var f = false; function test() { var f = true; //这是函数内定义的变量,只在函数内部有效,函数执行完毕后,该变量将被释

  • JavaScript 作用域scope简单汇总

    什么是作用域 程序的执行,离不开作用域,也必须在作用域中才能将代码正确的执行. 所以作用域到底是什么,通俗的说,可以这样理解:作用域就是定义变量的位置,是变量和函数的可访问范围,控制着变量和函数的可见性和生命周期. 而JavaScript中的作用域,在ES6之前和ES6之后,有两种不同的情况. ES6之前,JavaScript作用域有两种:函数作用域和全局作用域. ES6之后,JavaScript新增了块级作用域. 作用域的特性 在JavaScript变量提升的讨论中,我们其实是缺少了一个作用域

  • 详解angularjs 学习之 scope作用域

    简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个存储应用数据模型的对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 作用域是Web应用的控制器和视图之间的粘结剂: 控制器 --> 作用域 --> 视图(DOM) 指令 --> 作用域 --> 视图(DOM) 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: <div ng-controller=

  • 学习Angular中作用域需要注意的坑

    Angular作用域 在用angular搭建的网页应用中,作用域(scope)这个概念是贯穿其中的.在angular的视图(view)中的很多指令是会创建一个作用域的,例如 ng-app , ng-controller 等.这个作用域就是我们在写控制器构造函数时注入的 $scope (angular1.2之前的版本),他是视图模型(view model)中的一个概念.我们的数据模型(model)就是定义在作用域中的. Angular作用域的坑 用过angular的人应该都会经过一个过程,就是刚开

  • 详解Angular.js指令中scope类型的几种特殊情况

    前言 大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择: 使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域 scope:false 一个子作用域-这个作用域会原型继承父作用域 scope:true 一个隔离的作用域-一个全新的.不继承.独立存

  • angular和BootStrap3实现购物车功能

    angular和BootStrap3实现购物车功能

    一.页面搭建 1.html结构 采用BootStrap3来快速创建一个购物车表单样式. 主要功能: A:列表数据所示 B:增加删除端口 C:清空购物车 D:商品数量的增减 E:动态计算商品价格以及总价 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>购物车</tit

  • AngularJS的ng-repeat指令与scope继承关系实例详解

    AngularJS的ng-repeat指令与scope继承关系实例详解

    本文实例分析了AngularJS的ng-repeat指令与scope继承关系.分享给大家供大家参考,具体如下: ng-repeat指令的使用方式可以参考如下代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-repeat</title> <script src="jquery-1

随机推荐