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. 图论（网络流）：UVa 1659 - Help Little Laura

    Laura Luo has just invented a game. Given a beautiful pencil sketch with n points, you're to coloriz ...

  2. 【动态规划】【二分】【最长上升子序列】Vijos P1028 魔族密码

    题目链接: https://vijos.org/p/1028 题目大意: 给N个字符串(N<=2000),求能组成词链的单词最多有几个. 如果在一个由一个词或多个词组成的表中,除了最后一个以外, ...

  3. UTF8与GBK、GB2312等其他字符编码的相互转换

    utf8与其他字符编码的转换是国际化必然遇到的问题. windows的api函数对: WideCharToMultiByte和MultiByteToWideChar 个人喜欢的跨平台库: 单纯做字符编 ...

  4. VS2015接口智能提示少了异常信息 怎么破~

    问题:我想让VS2015提示的时候也显示关于“异常”的批注信息,亲们 如何破? 下图是VS3013的提示 下图是VS2015的提示 下图是接口注释

  5. cobbler客户端重装系统

    已有操作系统的主机通过koan从Cobbler服务器重装系统 1,安装epel rpm -ivh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel- ...

  6. 一步一步学android之事件篇——单击事件

    在使用软件的时候单击事件必不可少,比如我想确定.取消等都需要用户的单击,所有的单击事件都是由View.OnClickListener接口来进行处理的,接口定义如下: public static int ...

  7. angularJS constant和value

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.co ...

  8. AngularJS $on $broadcast $emit

    如何在作用域之间通信呢?    1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信.    2.通过作用域中的事件处理通信.但是这种方法有一些限制:例如,你并不能广泛的将事件传播到所有监控的 ...

  9. Rocketmq整体分析

    之前本人在实际的生产环境中,使用过activemq和rabbitmq消息队列,在使用过程中出现一些难以解决的问题,本文通过产品选型.网络架构和核心特性分析了rocketmq的优势和特性. 产品选型 我 ...

  10. Android使用DOM生成和输出XML格式数据

    Android使用DOM生成和输出XML格式数据 本文主要简单解说怎样使用DOM生成和输出XML数据. 1. 生成和输出XML数据 代码及凝视例如以下: try { DocumentBuilderFa ...