angularjs中scope与rootscope 区别

1，js代码

 代码如下 复制代码

phonecatApp.controller('TestCtrl',['$scope','$rootScope',
function($scope,$rootScope) {
$rootScope.name = 'this is test';
}
]);

phonecatApp.controller('Test111Ctrl',['$scope','$rootScope',
function($scope,$rootScope) {
$scope.name = $rootScope.name;
}
]);

2，html代码

 代码如下 复制代码

<div ng-controller="TestCtrl">
Iset the global variable.<strong>{{$root.name}}</strong>
</div>

<div ng-controller="Test111Ctrl">
1,get global variable .<strong>{{name}}</strong><br>
2,get global variable .<strong>{{$root.name}}</strong>
</div>www.111cn.net

3，显示结果

 代码如下 复制代码

I set the global variable.this is test
1,get global variable .this is test
2,get global variable .this is test

由结果可以看出来，$rootScope.name设置的变量，在所有controller里面都是可以直接用{{$root.name}}来显示的，很强大。那当然也可以赋值给scope.

时间： 2025-01-25 12:12:20

angularjs中scope与rootscope 区别的相关文章

AnjularJS中$scope和$rootScope的区别小结_AngularJS

一句话总结:      $rootScope针对全局的作用域生效      $scope只针对当前的controller作用域生效 用下面的例子来证明上述的说法: 定义一个模块名为myApp var myApp = angular.module('myApp', []); 创建oneController和twoController这两个controller oneController传入$scope和$rootScope myApp.controller('oneController', ['$

AngularJS中$apply方法和$watch方法用法总结_AngularJS

本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

深入探究AngularJS框架中Scope对象的超级教程_AngularJS

一.遇到的问题问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢? 这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController function

AngularJS中isolate scope的用法分析_AngularJS

本文实例讲述了AngularJS中isolate scope的用法.分享给大家供大家参考,具体如下: angular js中指令directive有个特别有用的东西,那就是 isolate scope (被隔离的scope) 关于具体他和全局的scope 有什么区别,可以参考下面这篇文章: AngularJS 全局scope与Isolate scope通信用法示例 本文主要讲解 其具体的几种使用方式: 1. = 的使用 [html] <div class="card" ng-re

深入解析AngularJS框架中$scope的作用与生命周期_AngularJS

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

AngularJS中监视Scope变量以及外部调用Scope方法_AngularJS

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值_AngularJS

在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve,其表格的表现方式是这样的: <table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper> 以上

AngularJS 全局scope与Isolate scope通信

在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在 directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它

AngularJS中如何使用echart插件示例详解_AngularJS

第一步:准备 首先我们要做的是在我们的项目中引入我们所需要的依赖,假设你已经在你的电脑上已经安装好了node与cnpm只需要利用控制台在你的项目目录下使用如下命令 1. cnpm install angular --save 2. cnpm install echarts --save 在安装完毕后你将会得到一个命名为node_modules的文件夹,而我们需要的东西都在里面,当一切准备完毕后我们就可以开始我们的开发了. 第二步:开发 我认为在angular中使用其他插件的最好方法是使用指令的形