Angular 从DOM中获取scope

节选官方文档:

原文:https://docs.angularjs.org/guide/scope

Retrieving Scopes from the DOM.

Scopes are attached to the DOM as $scope data property, and can be retrieved for debugging purposes. (It is unlikely that one would need to retrieve scopes in this way inside the application.) The location where the root scope is attached to the DOM is defined by the location of ng-app directive. Typically ng-app is placed on the <html> element, but it can be placed on other elements as well, if, for example, only a portion of the view needs to be controlled by Angular.

To examine the scope in the debugger:

  1. Right click on the element of interest in your browser and select ‘inspect element‘. You should see the browser debugger with the element you clicked on highlighted.
  2. The debugger allows you to access the currently selected element in the console as $0 variable.
  3. To retrieve the associated scope in console execute: angular.element($0).scope() or just type $scope

scope是附加在DOM上,使用了ng-app指令的DOM就是root scope。一般是<html ng-app="app">。但不绝对。

在chrome的调试面板中可以查看某个DOM附加的scope信息。

1. 右键元素,选择检查

2. 在console面板中输入$0并回车,可以显示当前所选的元素。

3. 获取附加在他上麦吗的scope信息。执行angular.element($0).scope() 或 仅输入 $scope

时间: 2024-12-12 20:00:57

Angular 从DOM中获取scope的相关文章

[angular] 篇 指令中的scope

scope参数有以下几种方式: 1,不填,默认为scope:false 2,scope:true 3,scope:{} 4, scope:{ name: '=', age: '@', say: '&' } 下面我来分别说明他们之间的用法: 第一种:看代码 <script> angular module('exampleApp', []) .controller('scopeCtrl', function ($scope) { // do something }); .directive

angular中的scope

angular.element($0).scope() 什么是scope? scope是一个refer to the application model的object.它是一个expression的执行上下文context.scopes模仿DOM的层次模型也有层次关系.Scopes可以watch一个expression也可以propagate events. scope特性 scope提供API $watch来观察模型的变化 scope提供API $apply来传播angular外部世界(比如c

Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $rootScope Angular 应用启动并生成视图时,会将根 ng-app 元

Angular中directive——scope选项与绑定策略,这个也经常迷惑的。

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的.但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了. 大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& .= .@. 首先是

在angular的自定义回调中操作$scope

在angular的controller中有时候会使用到自定义的回调, 比如异步请求的回调函数 一般返回之后都需要更新页面的数据,即更新$scope.xx 但是如果直接 $scope.xx = data.info 这样根本不会有任何的影响 解决方案 this.callback = function (status) { $scope.$apply(function () { $scope.xx = status; }); }; Scope提供$watch方法监视Model的变化. Scope提供$

怎么在Ubuntu Scope中获取location地址信息

Location信息对很多有地址进行搜索的应用来说非常重要.比如对dianping这样的应用来说,我们可以通过地址来获取当前位置的一些信息.在这篇文章中,我们来介绍如何获取Scope架构中的位置信息.这个位置信息可以对我们很多的搜索是非常重要的. 1)创建一个简单的Scope应用 我们首先打开SDK,并选择"Unity Scope"模版: 接下来,我们选择"Empty scope".这样我们就创建了我们的一个最基本的scope了. 我们可以运行我们的Scope.这是

javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j