angularJS中作用域是什么

  • 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的
  • 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文
  • $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方
  • 作用域是视图和控制器之间的胶水,在应用将视图渲染并呈献给用户之前,视图中的模板会和作用域进行连接

作用域能做什么

  • 提供观察者以监视数据模型的变化
  • 可以将数据模型的变化通知给整个应用,甚至是系统外的组件
  • 可以进行嵌套,隔离业务功能和数据
  • 给表达式提供运算时所需的执行环境

视图和$scope

  • angularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定
  • $rootScope是所有scope对象的最上层
  • $rootScope是angularJS中最接近全局作用域的对象。在rootScope上附加太多业 务逻并不是好主意,这与污染JavaScript的全局作用域是一样的，代码示例:
  •     demo.html

    <!doctype html>
    
    <html ng-app="freefedApp">
    
       <head>
    
            <title>angular应用demo</title>
    
            <script src="angular.js"></script>
    
            <script src="app.js"></script>
    
      </head>
    
      <body>
    
      <div ng-controller="helloCtrl">
    
          <input ng-model="name" type="text" />
    
         <button ng-click="changeText()">change</button>
    
          <div>{{ name }}</div>
    
         <div>apiKey:{{ apiKey }}</div>
    
       </div>
    
      </body>
    
    </html>
    app.js

    /*声明module*/
    
    var module = angular.module('freefedApp',[]).run(['$rootScope',function($rootScope){
    
          /*freefedApp模块内都可以访问到这个模块全局变量*/
    
          $rootScope.apiKey = 'abcdef97h5';
    
    }]);

    /*声明控制器*/
    
    module.controller('helloCtrl',['$scope',function($scope){
    
          $scope.name = 'hello world';
    
          $scope.changeText = function(){
    
              $scope.name = 'hello dingdone';
    
          };
    
          /*监听数据模型的变化*/
    
          $scope.$watch('name',function(newvalue,oldvalue){
    
         });
    
    }]);

理解angularJS中作用域$scope的更多相关文章

  1. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  2. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  3. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

  4. angularjs 中的scope继承关系——（2）

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...

  5. 理解angularjs的作用域

    <!doctype html> <html ng-app="myApp"> <head> <script src="http:/ ...

  6. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

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

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  8. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  9. 通俗理解angularjs中的$apply，$digest，$watch

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

随机推荐

  1. （转载）php数组添加、删除元素的方法

    (转载)http://www.phpgs.com/html/php/phpjichu/20120130440.html 带来一篇php 数组 添加元素.删除元素的方法的文章,有需要的php学习者参考下 ...

  2. Android Proguard

    Android Proguard 14 May 2015 语法 -include {filename} 从给定的文件中读取配置参数 -basedirectory {directoryname} 指定基 ...

  3. [jAudio] JAVA上经典特征提取工具

    1.下载Jar包后引入 现在的问题是jAudio通常是给人UI进行操作的,直接使用怎么办? 看了源码,发现特征提取是通过类之间交叉调用实现的,是否有办法整合一下?

  4. 最小生成树——[HAOI2006]聪明的猴子

    题目:[HAOI2006]聪明的猴子 描述: [题目描述] 在一个热带雨林中生存着一群猴子,它们以树上的果子为生.昨天下了一场大雨,现在雨过天晴,但整个雨林的地表还是被大水淹没着, 猴子不会游泳,但跳 ...

  5. Git全解析之用起来先

    文章目录 1. Git全解析之用起来先 1.1. 先安装Git环境 1.2. 配置 1.3. 简单了解Git 1.3.1. Git对象模型 SHA 1.3.2. Git目录与工作目录 1.4. 可以开 ...

  6. Freemarker数字转时间

    使用freemarker模板,展示一个时间字段,数据库保存的是毫秒.在网上找了许多文章,发现都是针对date或者是直接类似"1999-09-09"这样已经成型字符串进行操作的,心中 ...

  7. LibreOffice连接orcle 11g

    1.安装java 2.安装JDBC 官网下载 复制到/usr/java/jdk1.8.0_111/jre/lib/ext文件下

  8. 约瑟夫问题(Josephus Problem)的两种快速递归算法

    博文链接:http://haoyuanliu.github.io/2016/04/18/Josephus/ 对,我是来骗访问量的!O(∩_∩)O~~ 约瑟夫问题(Josephus Problem)也称 ...

  9. WebChat 清爽来袭 -- JavaChat系统Ⅳ

    题记:          WebChat 依然搭配的是 JavaChat 服务器,在不修改原来服务器代码的情况下进行使用终端的扩展.         此次项目的难点在于,Action/Servlet ...

  10. Javascript 控制style 小结

    style.top 如: c.style.top=scrollTop; 在IE各版本中可以,Safari, chrome, Firefox都不work, 需要在后面 + "px";