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. 数学计数原理（Pólya，高精度）：SGU 294 He's Circles

      He's Circles He wrote n letters "X" and "E" in a circle. He thought that there ...

  2. Contains Duplicate III —— LeetCode

    Given an array of integers, find out whether there are two distinct indices i and j in the array suc ...

  3. VS2010中的自动化测试（5）——Web性能测试

    原文地址:http://www.cnblogs.com/heqichang/archive/2011/11/20/2256478.html 类目见这里:http://www.cnblogs.com/h ...

  4. SRM 504(2-1000pt)

    DIV2 1000pt 题意:对于一个n*m的矩阵,每个格子都有一个颜色B或者W.对矩阵A执行以下程序后变成矩阵B.给出矩阵B,求A.(若有多种情况,输出字典序最小的).(n,m <= 16) ...

  5. Trident-MySQL

    使用事物TridentTopology 持久化数据到MySQL 1.构建拓扑JDBCTopology类 package storm.trident.mysql; import java.util.Ar ...

  6. javascrip实现无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 慕课python3.5学习笔记

    本文章中有部分代码为python2 慕课python入门 慕课python进阶 布尔值 布尔值可以用and.or和not运算. and运算是与运算,只有所有都为 True,and运算结果才是 True ...

  8. Java里的IO流里的FileInputStream 的读取并在前打印行数！

    大家好!!新人求罩! import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException ...

  9. SQLServer2005 常用语法大全

    SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELETE,UPDATE,INSERT) DCL—数据控制语言(GRAN ...

  10. [转] HTML中调用JavaScript的几种情况和规范写法

    比较简单,基础. 一.引用外部文件中的js脚本 <script type="text/javascript" src="ext.js"></s ...