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. 数学（莫比乌斯反演）：HAOI 2011 问题B

    题目描述: 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入格式: 第一行一个整数n,接下来n ...

  2. 【模拟】Codeforces 691B s-palindrome

    题目链接: http://codeforces.com/problemset/problem/691/B 题目大意: 求一个字符串是不是镜像的(不是回文).是输出TAK否则RE. 题目思路: [模拟] ...

  3. 软工UML学习札记

    UML模型由:事物.关系和图组成 (1)类(class)── 类用带有类名.属性和操作的矩形框来表示. (2)主动类(active class)── 主动类的实例应具有一个或多个进程或线程,能够启动控 ...

  4. CodeForces 221(div 2)

    A 无trick水题... /* * Author: Plumrain * Created Time: 2013-12-24 22:26 * File Name: B.cpp */ #include ...

  5. 关闭ES动态创建mapping

    使用ES的默认配置会使我们在索引不存在于mapping中的字段时,会自动创建. 这无疑会给我们带来困扰. 在我们不想要某个字段被搜索的时候,我们可以在开始关闭动态创建mapping. 执行如下操作: ...

  6. sql第一课笔记

    这是我看了imooc的视频教程之后重新写的笔记. 虽然之前也是学习过SQL Server数据库,但是也是忘记得差不多了.现在重新捡起来,安装一次数据库练习,使用的是mysql. 第一课是最简单的创建, ...

  7. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  8. intent和intentfilter

    intent 和intent Filters startActivity()的机制 用到了IBinder ipc 用到了进程间通讯机制 activity有四种LaunchMode 当startActi ...

  9. vbird BASH学习

    http://vbird.dic.ksu.edu.tw/linux_basic/0320bash.php#alias

  10. 根据IP地址获取IP的详细信息

    <?php header('Content-Type:text/html; charset=utf-8'); function ip_data() { $ip = GetIP(); $url = ...