对angular 实时更新模板视图的方法$apply详解

有的时候在回调里面写了更新scope的里面的内容，视图上面竟然没有同时更新，这就用到了$apply

Scope的特性

接下来，看看Scope有哪些特性呢？

Scope提供$watch方法监视Model的变化。

Scope提供$apply方法传播Model的变化。

Scope可以继承，用来隔离不同的application components和属性访问权限。

Scope为Expressions的计算提供上下文。

最简单的使用方法，就是在需要传递变化的地方写上以下代码

$scope.$apply();

即可完美解决问题！

以上这篇对angular 实时更新模板视图的方法$apply详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angularjs中的$apply及优化使用详解

    前言 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. 今天,我们要聊得是Angularjs中的小明星$apply.当我们数据更新了,但是view层却没反应时,总能听到有人说,用apply吧,然后,懵懂无知的我们,在赋值代码后面加了$scope.$apply() ,然后就惊喜的发现.噢,真的更新了. 然而,有些时候,编译器会无情的给你返回 Error: $d

  • Angular项目中$scope.$apply()方法的使用详解

    前言 相信大家在一开始用angular做项目的时候,一定碰到过$scope.$apply()方法,表面上看,这像是一个帮助你进行数据更新的方法,那么,它为何存在,我们又该如何使用它呢.下面话不多说,来一起看看详细的介绍吧. JavaScript执行顺序 JavaScript单线程操作,代码按照代码片段的顺序来之行,每个代码块从运行到结束都不会被打断,这也是为什么会发生浏览器阻塞的情况,往往是有一部分在运行,而导致其他所有的代码段冻结. 每当有耗费时间较多的任务出现,例如等待一个click事件,等

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • angular4强制刷新视图的方法

    使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor(private zone: NgZone) { this.zone.run(() => { // 要更新视图的代码 }) } 以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大

  • AngularJS中$apply方法和$watch方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

  • 对angular 实时更新模板视图的方法$apply详解

    有的时候在回调里面写了更新scope的里面的内容,视图上面竟然没有同时更新,这就用到了$apply Scope的特性 接下来,看看Scope有哪些特性呢? Scope提供$watch方法监视Model的变化. Scope提供$apply方法传播Model的变化. Scope可以继承,用来隔离不同的application components和属性访问权限. Scope为Expressions的计算提供上下文. 最简单的使用方法,就是在需要传递变化的地方写上以下代码 $scope.$apply()

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • angular强制更新ui视图的实现方法

    目录 angular 强制更新ui视图方法 1 主要使用方法类 ChangeDetectorRef 2 赋值引入 3方法中调用 angular踩坑 数据发生改变,视图未更新 解决方案 总结 angular 强制更新ui视图方法 强制更新ui视图方法主要用在数据已经改变,但是ui展示视图不跟新情况 1 主要使用方法类 ChangeDetectorRef Angular 各种视图的基础类,提供变更检测功能. 变更检测树会收集要检查的所有视图. 使用这些方法从树中添加或移除视图.初始化变更检测并显式地

  • Django视图和URL配置详解

    Django视图和URL配置详解

    本文研究的主要是Django视图和URL配置,具体介绍如下. 一.视图 1.在mysite文件夹下,创建views.py文件(文件名没有特别的要求): from django.http import HttpResponse def hello(request): return HttpResponse("Hello world") 2.修改mysite文件夹下的urls.py文件: from django.conf.urls import url from django.contri

  • Django模板标签中url使用详解(url跳转到指定页面)

    django {% url %} 模板标签使用 inclusions/_archives.html ... {% for date in date_list %} <li> <a href="{% url 'blog:archive' date.year date.month %}" rel="external nofollow" > {{ date.year }} 年 {{ date.month }} 月 </a> </l

  • 微信小程序常用视图容器组件使用详解

    微信小程序常用视图容器组件使用详解

    目录 1.组件概述 2.常用的试图容器组件 2.1view 2.2scroll-view 2.3swiper 1.组件概述 组件是视图层基本的组成单元,具备UI风格样式以及特定的功能效果.当打开某款小程序之后,界面中的图片.文字等元素都需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果.一个组件包括开始标签和结束标签,属性用来装饰这个组件的样式. 其语法格式如下: <标签名称 属性="值">内容<

  • Angular中$cacheFactory的作用和用法实例详解

    Angular中$cacheFactory的作用和用法实例详解

    先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.

  • 关于pip的安装,更新,卸载模块以及使用方法(详解)

    在Python的学习过程中,肯定会遇到很多安装模块的地方,可以使用easy_install安装,但是easy_install相对于pip而言,最大的缺陷就是它所安装的模块是不能够卸载的,其他功能是和pip一样的. 下面介绍一下pip的安装: 安装我总结了两个方法 1 通过下载安装文件来安装 2 通过easy_install安装 1 下载pip安装包 https://pypi.python.org/pypi/pip#downloads 1) 网页提供了两个安装包,一个是.whl的 一个是压缩包的,

  • Asp.Net MVC4通过id更新表单内容的思路详解

    用户需求是:一个表单一旦创建完,其中大部分的字段便不可再编辑.只能编辑其中部分字段. 而不可编辑是通过对input输入框设置disabled属性实现的,那么这时候直接向数据库中submit表单中的内容就会报错,因为有些不能为null的字段由于disabled属性根本无法在前端被获取而后更新至数据库. 有下面两种思路: 1.通过创建隐藏表单,为每一个disabled控件分别创建一个隐藏控件,但是这样的问题是工作量太大(如果表单有一千个属性,你懂的) 2.通过获取该表单在数据库中的id,把该id和可

  • Mysql事项,视图,函数,触发器命令(详解)

    事项开启和使用 //修改表的引擎 alter table a engine=myisam; //开启事务 begin; //关闭自动提交 set autocommit=0; //扣100 update bank set money=money-100 where bid=1; //回滚,begin开始的所有sql语句操作 rollback; //开启事务 begin; //关闭自动提交 set autocommit=0; //扣100 update bank set money=money-10

随机推荐