Angular企业级开发(8)-控制器的作用域

scope概念

scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性。scope可以应用在视图和控制器上。

scope简单示例

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Scope Demo</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>

  <hr>
  <p>{{sayHello()}}</p>
</body>
</html>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  
  $scope.sayHello=function(){
    return "Angular Scope Demo";
  }
});

name是属性,sayHello()是方法。

Demo Link

$rootScope介绍

$rootScope是多个控制器都可以访问的对象,在$rootScope中定义的属性或方法可以在多个控制器中使用。但是$rootScope有可能产生诡异的问题。

AngularJS应用启动并生成视图时,会将根ng-app元素与$rootScope进行绑定。$rootScope 是所有 $scope 的最上层对象,可以理解为一个 AngularJS应用中得全局作用域对象,

$rootScope实例
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Scope Demo</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-controller="Ctrl1">
    <p>{{name1}}</p>
    <p>value from $rootScope:{{rootScopeValue}}</p>
  </div>
  <hr>
  <div ng-controller="Ctrl2">
    <p>{{name2}}</p>
    <p>value from $rootScope:{{rootScopeValue}}</p>
  </div>

</body>

</html>
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($rootScope) {
  $rootScope.rootScopeValue="The value from $rootScope";
});

app.controller('Ctrl1', function($scope) {
  $scope.name1="username in Ctrl1";
});

app.controller('Ctrl2', function($scope,$rootScope,$timeout) {
  $scope.name2="username in Ctrl2";
  $timeout(function(){
    $rootScope.rootScopeValue="change $rootScope value in Ctrl2";
  },3000)
});

$rootScope Demo

小结

  1. scope作用域不是从ng-controller开始的,之前个人理解都是以为是ng-controller开始的标签,视图上才绑定scope的属性和方法是错误的。

  2. scope在AngularJS中了提供视图和控制器之前数据绑定的桥梁

  3. $rootScope作用域顶层,嵌套的控制器可以继承到$rootScope的属性和方法。

参考资料

  1. AngularJs之Scope作用域
  2. Angularjs学习笔记5_scope和$rootScope
    
更多相关文章
  • AngularJS开发指南9:AngularJS作用域的详解
    AngularJS作用域是一个指向应用模型的对象.它是表达式的执行环境.作用域有层次结构,这个层次和相应的DOM几乎是一样的.作用域能监控表达式和传递事件.作用域的特点作用域提供APIs($watch)来观察模型的变化.作用域提供APIs($apply)将任何模型的改变,反映到视图上.作用域能通过共 ...
  • 刚刚接触Angular,希望大神指点. 1.因为ng-click中解析的是AngularJs的表达式,而原生的click只是单纯的运行JavaScript的代码. 2.关于AngularJS的表达式可以看这里(需翻墙),或者这里(不需要翻墙). 3.ng-click配合其它的指令可以显示出其强大的能 ...
  • AngularJS入门讲解1:angular基本概念
    AngularJS应用程序主要有三个组成部分:模板(Templates)模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的指令. AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自 ...
  • 我最近在用polymer和angular做开发,遇到了一些问题 一. paper-dropdown-menu在第二次点击打开菜单之后就会出现一次点击两次弹出菜单的效果,第一次弹出是闪现,这是什么问题 二.当一个polymer元素绑定了angular的ng-controller之后,这个元素的点击事件 ...
  • 使用 AngularJS 创建的 RSS 阅读器 —— FreedReadR
    下载所有的源码和mongoose web服务器 – 538.1 KB------------------------------------------分割线------------------------------------------免费下载地址在 http://linux.linuxidc ...
  • AngularJS入门讲解2:过滤器和双向绑定
    我们在上一课做了很多基础性的训练,接下来,我们讲一些难点的知识点,首先,讲一下如何实现一个全文检索功能: <html ng-app><head>  ...  <script src="lib/angular/angular.js"></s ...
  • OFBiz 配置文件
    OFBiz是一个非常好的企业级开发架构,实现了多层的松耦合结构,有很好的灵活性,配置文件为灵活性提供了很大的支持.下面主要说一下,在开发中几个比较重要的配置文件.1.entityengine.xml文件本文件是配置数据源的,同时也包括数据库连接池.事务实现类的配置和字段类型的配置文件.在ofbiz中 ...
  • Java之Caesar与Vigenere实现
    1  背景介绍话说目前做所谓"企业"开发的语言基本就集中在运用.Net和J2EE上了.又话说,在下很不幸又和Java"同流合污"了一把.现在回想起来,真是感慨万千啊-遥想公瑾当年,小乔初嫁了,雄姿英发,羽扇纶巾,谈笑间,强虏灰飞烟灭.- 额,下面插播一下正题. ...
  • Red Hat发布Data Grid 6 JBoss迎来NoSQL
    Red Hat近日宣布其企业级开发平台JBoss将增加基于Key-Value存储NoSQL产品JBoss Data Grid 6,以此来提升JBoss平台在大数据处理方面的能力.目前,新版的JBoss Enterprise Application Platform 6已提供该功能的支持.JBoss ...
一周排行