关于 Angular.js 应用里的 $scope.$apply()

简介: 关于 Angular.js 应用里的 $scope.$apply()

2秒钟后:

源代码:

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular/angular.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.firstName = 'John';

        $scope.$watch('lastName', function(newValue, oldValue){
          console.log('new value is ' + newValue);
        });

        setTimeout(function(){
          $scope.lastName = 'Smith';
          $scope.$apply();
        }, 2000);
      });
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

这段代码是一个简单的AngularJS示例,用于展示基本的模块定义、控制器创建、双向数据绑定、以及如何监视模型变化。下面是代码的详细解析:

  1. AngularJS 应用定义
<html ng-app="nameApp">

这行代码定义了一个名为 nameApp 的 AngularJS 应用。ng-app 指令告诉 AngularJS,页面上的这个 HTML 元素及其子元素构成了 AngularJS 应用的边界。


2.模块定义

var nameApp = angular.module('nameApp', []);

这行 JavaScript 代码定义了一个名为 nameApp 的新模块。这个模块当前没有依赖(依赖数组为空),这是AngularJS应用的起点。

3.控制器定义

nameApp.controller('NameCtrl', function ($scope){
  ...
});

在 nameApp 模块中定义了一个控制器 NameCtrl。控制器是一个JavaScript函数,用于增强 AngularJS 的作用域。这里 $scope 是一个特殊的对象,AngularJS 使用它来传递数据和方法。


4.变量绑定和监视

$scope.firstName = 'John';

控制器函数内,我们设置 $scope.firstName 初始化为 “John”。

$scope.$watch('lastName', function(newValue, oldValue){
  console.log('new value is ' + newValue);
});

这是 $scope$watch 方法,用于监视 lastName 属性的变化。每当 lastName 的值发生变化时,都会执行回调函数,打印新的值。

5.异步更新和 $apply

setTimeout(function(){
  $scope.lastName = 'Smith';
  $scope.$apply();
}, 2000);

使用 setTimeout 函数模拟异步操作,在 2000 毫秒后将 lastName 更改为 “Smith”。由于这是在 AngularJS 的作用域之外的异步操作,所以需要手动调用 $scope.$apply() 来触发脏值检查,从而更新绑定并反映在视图上。

6.HTML 视图与数据绑定

<body ng-controller="NameCtrl">
  First name:<input ng-model="firstName" type="text"/>
  <br>
  Last name:<input ng-model="lastName" type="text"/>
  <br>
  Hello {{firstName}} {{lastName}}
</body>

在 HTML 部分,使用 ng-controller 指定 NameCtrl 控制器控制 body 标签内的元素。ng-model 指令用于在输入框和 $scope 对象的属性之间建立双向数据绑定。插值表达式 {{firstName}} {{lastName}} 用于在页面上显示这些变量的值。


通过上述的组件和机制,这个 AngularJS 示例展示了如何在应用中处理数据、监视数据变更,并在数据变更时更新视图。

相关文章
|
4天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
10 0
|
4天前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现
16 0
|
2天前
|
前端开发 JavaScript
前端 JS 经典:apply、call、bind
前端 JS 经典:apply、call、bind
5 0
|
4天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
4天前
|
设计模式 JavaScript 前端开发
JS中发布/订阅模式的简单应用
JS中发布/订阅模式的简单应用
|
4天前
|
数据可视化 JavaScript 定位技术
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
Cesium是一种基于WebGL开源的虚拟地球技术,可以用于构建高性能、跨平台的三维地球应用程序,它支持多种数据格式和地图服务,可以实现地球表面的高精度渲染、地形分析、数据可视化等功能。Cesium还提供了丰富的API和插件,方便开发者进行二次开发和定制化,且可免费商用,在航空航天、国防、城市规划、教育等领域得到了广泛应用。
24 0
Cesium第1篇,CesiumJS第1篇,CesiumJS使用详细,在vue中使用Cesium.js(WebGIS中的Cesium地图可视化应用)
|
4天前
|
资源调度 JavaScript 编译器
显式指定 npm 作为创建 Angular 应用时的包管理器
显式指定 npm 作为创建 Angular 应用时的包管理器
14 1
|
4天前
|
JavaScript 前端开发
Angular.js 应用里如何发送 HTTP 请求
Angular.js 应用里如何发送 HTTP 请求
20 3
|
4天前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
8 0
|
5天前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。