zoukankan      html  css  js  c++  java
  • 理解angularJS中作用域$scope

    angularJS中作用域是什么

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

    作用域能做什么

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

    视图和$scope

    • angularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定
    • $rootScopescope对象的最上层
    • $rootScopeangularJSrootScope上附加太多业 务逻并不是好主意,这与污染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){
               });
          }]);
        
    他们也许不懂交互设计,但是没人比他们懂交互设计的实现,和每一个细节。
    他们也许不懂视觉设计,但是没人比他们懂视觉设计如何变为现实。
    他们也许不懂后台数据库,但是他们其实才是数据的第一消费者。
    他们也许不是产品经理,但是产品的质量几乎都是由他们来决定。
  • 相关阅读:
    IIs和ftp
    java中HashMap重要性质和优化总结
    深入理解mysql的left join(真的很深入)
    windows bat批处理语法简析
    遍历hashMap的两种方式
    Java开发实践 集合框架 全面分析
    MySQL中日期与时间类型
    CentOS6.5下Redis安装与配置
    查看redis进程
    Web阶段:第七章:Tomcat服务器
  • 原文地址:https://www.cnblogs.com/freefed/p/4835504.html
Copyright © 2011-2022 走看看