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. 线性规划||网络流(费用流)：COGS 288. [NOI2008] 志愿者招募

    [NOI2008] 志愿者招募 输入文件:employee.in   输出文件:employee.out   简单对比 时间限制:2 s   内存限制:512 MB [问题描述] 申奥成功后,布布经过 ...

  2. 使用StaticResource给控件定义公共的样式和属性来写界面XAML

    一:效果图 二:定义公共的样式和属性 在MainPage.xaml中 <phone:PhoneApplicationPage.Resources> <SolidColorBrush ...

  3. lightoj 1026 无向图 求桥

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1026 #include<cstdio> #include<cstri ...

  4. Selenium webdriver firefox 路径设置问题

    问题: Cannot find firefox binary in PATH. Make sure firefox is installed. 原因:selenium找不到Firefox浏览器. 方法 ...

  5. Theme Section - HDU 4763（KMP）

    题目大意:给你一个串,从这个串里面找出一个前缀后缀中间相等的串的最大长度也就是 EAEBE,每个字母都代表一个串,E出现了三次,找出最长的那个E.   分析:我们知道KMP里面保存的就是前缀和后缀的最 ...

  6. hive 模块

  7. Linux(SLES)挂载NTFS移动硬盘实践

    问题描写叙述: 因为通过測试环境导出的dmp过大,但要求尽快导入至生产server,请网络室打通防火墙后发现測试网络为100M而生产网络贵为1000M却无法发挥不论什么作用即使通过networklin ...

  8. [ES6] Array.findIndex()

    In es5, you can use indexOf to get the index of one item in an array. In es6, you can use findIndex( ...

  9. Redis配置文件分析

    #Redis演示示例配置文件 # 注意单位问题:当须要设置内存大小的时候,能够使用类似1k.5GB.4M这种常见格式: # # 1k=> 1000 bytes #1kb => 1024 b ...

  10. oracle中imp命令具体解释

    oracle中imp命令具体解释 Oracle的导入有用程序(Import utility)同意从数据库提取数据,而且将数据写入操作系统文件.imp使用的基本格式:imp[username[/pass ...