首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我如何在ngshow和ng hide变量中保留一些值,这样$digest就不会在angularjs中一次又一次地初始化它们?

在AngularJS中,ng-show和ng-hide指令用于根据表达式的值来显示或隐藏元素。默认情况下,每次$digest循环都会重新计算表达式的值,这可能会导致性能问题。为了避免这种情况,你可以使用ng-init指令来初始化变量,并将其存储在作用域中,以便在每次$digest循环中重用。

以下是一种方法来在ng-show和ng-hide变量中保留值,以避免在每次$digest循环中重新初始化它们:

  1. 在控制器中定义一个变量,并将其初始化为所需的值。例如,你可以在控制器中添加以下代码:
代码语言:javascript
复制
$scope.showValue = true;
  1. 在HTML模板中使用ng-init指令将该变量初始化为控制器中定义的值。例如,你可以在ng-show或ng-hide指令中添加以下代码:
代码语言:html
复制
<div ng-show="showValue" ng-init="showValue = showValue"></div>

通过将ng-init指令设置为showValue = showValue,你可以确保在每次$digest循环中保留变量的值,而不会重新初始化它。

需要注意的是,ng-init指令在AngularJS中被认为是一种不良实践,因为它会在模板中引入额外的逻辑。更好的做法是在控制器中初始化变量,并使用ng-show和ng-hide指令直接引用这些变量。

关于ng-show和ng-hide的更多信息,你可以参考腾讯云的AngularJS文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

这里的watcher和你会在AngularJS设置的watcher是一样的: $scope....当$digest循环开始后,它会触发每个watcher。这些watchers会检查scope的当前model是否上一计算得到的model不同。如果不同,那么对应的回调函数会被执行。...除了ng-click指令,还有一些其它的built-in指令以及服务来让你更改models(比如ng-model,$timeout等)自动触发一$digest循环。 目前为止还不错!...当 $digest 循环结束时,DOM 相应变化。 脏检查如何被触发? angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。...的$apply()以及$digest()(翻译:原文地址) MVVM的简单实现-脏检测 Angular系列(徐飞博客:由浅入深阐释了angularJS) Angular 1 深度解析:脏数据检查与

7.8K40

前端面试题angular_Vue前端面试题

Angular 1,ng-if 跟 ng-show/hide 的区别有哪些?...这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。...AngularJS在scope变量中使用脏检查来实现了数据双向绑定,并且可以通过scope.watch来监听变化触发回调; angular中使用的是脏检查机制,在angular每次你绑定一些东西到你的...当digest循环结束时,DOM相应变化。...scope上的一些表达式,常见我们设置一些需要执行的函数 15、apply() digest()的区别 安全性:apply()可以接收一个参数作为function(),这个 function 会被包装到一个

14.1K20
  • AngularJS 指令的定义、语法、用法

    AngularJS 提供了一些内置的指令, ng-model、ng-repeat、ng-show 等,同时也支持开发者自定义指令。---2....通过 ng-model 指令,可以将用户在表单元素输入的自动同步到控制器变量,并且当变量改变时,相应更新表单元素的显示。... {{ item }}4.3 ng-show/ng-hide 指令ng-show ng-hide 指令用于根据表达式的...AngularJS 指令的实用技巧5.1 合理使用指令在开发过程,应合理使用指令,并避免滥用或过度依赖指令。如果一个功能可以通过其他方式(控制器、过滤器)实现,就不需要创建新的指令。...通过合理使用指令的类型语法,我们可以轻松实现各种功能,双向绑定、循环渲染、显示隐藏等。

    31630

    Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    1.2 数据从controller流向html 也就是从模型层流向数据层,当controller的数据模型变量发生变化后,Angularjs又会根据数据模型的去改变ng-model指令绑定的表单元素的...这里就是 Angularjs1.X双向数据绑定的第一个坑 ,你会发现$scope上绑定的数据模型html显示的内容有时候并不是实时关联的。这其实Angularjs1.X的执行机制有关系。...按钮 2.2 你丫怎么又不刷新了 随着上一节的操作步骤,我们一起来见证双向数据绑定又一次闹鬼事件: 点击5+1按钮,再点击5数字标签 结果为: ?...其基本过程是这样的,每当我们使用ng-model或ng-bind指令将数据模型的某个变量html页面上某个标签的内容联系起来时,Angular就会把这些变量放进一个WatchCollection的集合...每当WatchCollection中有变量出现变动时,Angular就会遍历WatchCollection来查看是否有其他监控变量也被影响,每当有一个变量被影响,Angular都会在遍历后再进行一遍历

    3.5K20

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    ng-init -该指令初始化应用程序数据。 ng-model -此指令定义的模型,该模型是变量AngularJS使用。 ng-repeat -该指令将重复集合的每个项目的HTML元素。...开发者也可以在局部使用ng-app指令,,则AngularJS脚本仅在该运行。...= {color:'red'}; 2.1.1.7 ng-show,ng-hide ng-show,ng-hide         对于比较常用的元素显隐控制,ng也做了封装,ng-showng-hide...当页面加载的时候,AngularJS会根据输入框的属性名字,将 其与数据模型相同名字的变量绑定在一起,以确保两者的同步性。         ...这些可以帮助模型视图分离,但是他们两者确实是同步的!任何 对于模型的更改都会即时反映在视图上;任何在视图上的更改都会被立刻体现在模型

    53980

    达观数据对AngularJS技术的思考与实践

    AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTMLng-model)来设置数据绑定。 在HTML: ? 在JS: ?...这使得过滤器通常用来做些“适时给输出加入CSS样式”等工作。例如: ? AngularJs允许自定义filter:在你的模块中注册一个新的过滤器(可注入的)工厂函数。...一般获取依赖有三种方式,用new操作符创建依赖,通过全局变量查找,依赖需要时被导入。前两种方式都不是很好,因为它们需要对依赖硬编码,使得修改依赖的时候变得困难。...坦白的来讲,用了这种方法就不能使用JavaScript minifiers/obfuscators(一些用来缩短的JS的类库)了,因为它们会改变变量名。...1)作用域的原型继承:原型继承时对变量的赋值不会修改原型,而是直接在当前scope创建一个同名的属性;但如果是变量是对象,则不会创建。即基本类型会重新创建变量,引用则不会。 ?

    5.4K150

    7-进军 angular1.x 表单事件、模块

    拉框初始化无默认,或者有空白选项,影响美观,可通过以下方法调整: 1.给定初始化信息(ng-init) 2.隐藏空白选项(ng-show="false") 选择一个选项: <select...even 偶数奇数 $idnex 序号 从 0 开始 一些 ng 指令 ng-hide ng-show ng-disabled 顾名思义 <div ng-app="myApp" ng-controller...("myApp", []); app.directive("runoobDirective", function() { return { template : "在指令构造器创建...}; }); script> 复制代码 模块控制器包含在 JS 文件 通常 AngularJS 应用程序将模块控制器包含在 JavaScript 文件。...表单是否验证通过 $invalid 表单是否验证失败 $error 表单的验证错误 控制器的意义:控制器是分发者,处理临时数据、对域($scope)进行划分 指令的意义:可以重复使用,可自定义创建,代码

    2.3K20

    2-进军 angular1.x 表达式指令

    tips 每个页面只有一个 ng-app 指令,多的不起作用 1.ng-app是一个特殊的指令,一个HTML文档只出现一出现多次也只有第一个起作用;ng-app可以出现在html文档的任何一个元素上...2.ng-app作用:告诉子元素指令是属于angularJs。 3.ng-app的可以为空(练习),项目中一定要赋值,后面所说的模块。...ng-init 指令初始化应用程序数据。 ng-model 指令把元素(比如输入域的)绑定到应用程序。...name变量,与父级作用域中的 // name相对独立,所以再修改父级的name对second的name就不会有影响了 template: 'second name:...name变量,与父级作用域中的 // name相对独立,所以再修改父级的name对second的name就不会有影响了 template: 'second name:

    2.4K20

    Angular2:从AngularJS 1.x 中学到的经验

    AngularJS 1.x ,不同的监视器之间可以相互依赖,从而导致了digest 循环必须进行若干遍历,这些表达式的结果才能最终趋于稳定。...不同的数据绑定之间没有依赖关系,所以digest 没有存活时间(TTL)的概念。 性能更高:① digest 循环只运行一。...根据从AngularJS 1.x 获得的经验,还有一件事情我们已经习惯了,那就是模板指令里面使用的微语法(microsyntax ),ng-if、nf-for。...利用JavaScript 虚拟机的代码优化机制可以获得显著的性能提升,其中一种优化叫做内联缓存。但是AngularJS 1.x 实现的digest循环内存使用效率不高,而且阻碍了这种优化过程。...最终结果就是:Angular 2 中有两种内置脏检测机制: 动态脏检测:与AngularJS 1.x 的脏检测机制类似。用于不允许eval()的系统CSP 插件Chrome 插件。

    2.7K10

    Angular与MVVM框架

    这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,建立对作用域的的监听。这样最后就形成了作用域的DOM的动态绑定。任何一个作用域的改变都会在DOM上体现出来。...更多可以参考[译]ng指令的compile与link函数解析 $digest $watch存储了监听函数,当作用域里的变量发生变化时,调用$digest方法便会执行该作用域以及它的所有子作用域上的相关的监听函数...,从而做一些操作(:改变view)。...digest方法是dirty check的核心,也是双向绑定的主要实现,主要思路是先执行$$asyncQueue队列的表达式,然后开启一个loop来的执行所有的watch里的监听函数,前提是前后两是否不相等...另外:$RootScopeProvider中提供了digestTtl方法,用于修改TTL的(默认是10),可以这样修改: angular.module('ng').config(['$rootScopeProvider

    2.6K20

    Angular与MVVM框架

    这会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件,建立对作用域的的监听。这样最后就形成了作用域的DOM的动态绑定。任何一个作用域的改变都会在DOM上体现出来。...更多可以参考[译]ng指令的compile与link函数解析 $digest $watch存储了监听函数,当作用域里的变量发生变化时,调用$digest方法便会执行该作用域以及它的所有子作用域上的相关的监听函数...,从而做一些操作(:改变view)。...digest方法是dirty check的核心,也是双向绑定的主要实现,主要思路是先执行$$asyncQueue队列的表达式,然后开启一个loop来的执行所有的watch里的监听函数,前提是前后两是否不相等...另外:$RootScopeProvider中提供了digestTtl方法,用于修改TTL的(默认是10),可以这样修改: angular.module('ng').config(['$rootScopeProvider

    3.9K90

    带你走近AngularJS - 创建自定义指令

    当然,总需要有第一个吃螃蟹的人,创建指令共享使用,但是目前Tabs指令已经很常见了,可以在任何地方复用(BootStrap,、jQueryUI、Wijmo, 一些知名的前端插件集)。...以下是一些属性的理解: restrict: 说明指令在HTML的应用形式,备选项有"A"、"E" "C", "M" ,分别代表 attribute、element、classcomment(...replace: 说明是否替换原始标记或是追加原始标记。默认是false,这时原始标记将被保留。 transclude: 说明自定义指令是否复制原始标记的内容。...scope 变量初始化时是不被定义的,link 方法会注册监视器监视变化事件。...("@")的scope 变量将不会被初始化它们会在指令的生命周期中另一个时间点进行初始化,如果你需要监听这个事件,可以使用scope.

    2.4K100

    【17】进大厂必须掌握的面试题-50个Angular面试

    特征 AngularJS Angular 建筑 支持MVC设计模型 使用组件指令 语言 推荐语言:JavaScript 推荐语言:TypeScript 表达式语法 图片/属性事件需要特定的ng指令...使用它们,您可以轻松组织数据,使数据仅在满足特定条件时才显示。通过使用竖线字符|,将过滤器添加到表达式,然后是过滤器。 14. AngularjQuery有什么区别?...17.如何区分Angular表达式JavaScript表达式? Angular表达式 JavaScript表达式 1.它们可以包含文字,运算符变量。 1.它们可以包含文字,运算符变量。...Angular的摘要周期是监视监视列表的过程,以跟踪监视变量的变化。在每个摘要循环中,Angular都会比较范围模型的先前版本新版本。...被监视的变量处于单个循环(摘要循环),任何变量的任何值更改都会在DOM重新分配其他被监视变量 32.区分DOMBOM。

    41.4K51

    Angular 2:Web技术发展的必然选择

    这样一来,多线程编程就被引入到了浏览器。...以上这些API,有一些是在AngularJS 1.x 开始开发之后才发明出来的,这就是为什么在AngularJS 1.x 并没有用到它们的大部分内容的原因。...现在,我们来简要讨论一下:如何在全新的Angular 内核融合上面提到的这些技术?为什么要这样做?...拷贝返回。 把当前表达式的运算结果与上一相比较。 以上所有步骤都有可能运行得非常慢,这输入的数据量有关。如果digest 循环涉及密集的运算,为什么不把它移到WebWorker 中去?...如果在AngularJS 1.x 处理这些问题,内部实现会变得相当复杂。因为框架一开始压根就不是基于这一机制构建的。

    1.8K10

    走进AngularJs(二) ng模板中常用指令的使用方式

    通过使用模板,我们可以把modelcontroller的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。ng的模板真是让爱不释手。...= {color:'red'}; 3. ng-show,ng-hide    对于比较常用的元素显隐控制,ng也做了封装,ng-showng-hide为boolean类型的表达式,当值为true...:   为了避免这种情况,我们使用ng-src指令,这样在路径被正确得到之前就不会显示找不到图片。...因为编写的是单页面应用,页面只会在加载index.html的时候出这个问题,只需在index.html的模板换成ng-bind就行。其他的模板是我们动态加载的,就可以放心使用{{}}了。...~在写这篇文章之前就在纠结,写这样的内容是不是有点多余,因为这些东西在angular官网(http://docs.angularjs.org/api/)一看就明白,而且在线示例也写的很棒。

    2.9K20

    【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

    上一篇,我们介绍ng的数据绑定的方法,不知道你是否能给吸收。想了一下,为了在 ng 入门之前能够帮助大家打好基础,所以在这篇就用一个例子来解析 ng,并归纳一下 ng 的知识点。...是一种“脚本跨应用缓存”,即当用户有多个使用angularjs的应用时,ng只下载一,不会再次加载CDN。)...(2)使用ng-app告知angular管理那一部分的DOM; 注释:如果在现有的一个应用,希望使某部分用angularjs来管理,就在该部分的元素上加上ng-app,<...如此下来,用angular结构化应用,将应用程序的模板填充它们的数据分离啦爽吧~ 这样一来,模板可缓存,在第一加载后只有新数据加载到浏览器,提升了浏览器的性能。...ng-submit 、ng-change、 ng-disabled 这些常用指令一定要熟悉它们的用法,在实际工作很常用到。

    26640

    Angular学习资料大全常用语法汇总(让后端程序员轻松上手)

    前言:   首先为什么要写这样的一篇文章呢?...主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识的大多数小伙伴都是后端的同学),所以今天准备出一篇Angular学习资料汇总和日常开发中使用比较频繁的语法总结...要了解关于 FormsModule ngModel 的更多信息,参阅表单一章。...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 在应用包含 HTML 文件 ng-init 定义应用的初始化...ng-transclude 规定填充的目标位置 ng-value 规定 input 元素的 https://www.runoob.com/angularjs/angularjs-reference.html

    5.3K41

    【笔记】AngularJs学习笔记【实践回顾与知识点归纳】

    上一篇,我们介绍ng的数据绑定的方法,不知道你是否能给吸收。想了一下,为了在 ng 入门之前能够帮助大家打好基础,所以在这篇就用一个例子来解析 ng,并归纳一下 ng 的知识点。...是一种“脚本跨应用缓存”,即当用户有多个使用angularjs的应用时,ng只下载一,不会再次加载CDN。)...(2)使用ng-app告知angular管理那一部分的DOM; 注释:如果在现有的一个应用,希望使某部分用angularjs来管理,就在该部分的元素上加上ng-app,<...如此下来,用angular结构化应用,将应用程序的模板填充它们的数据分离啦爽吧~ 这样一来,模板可缓存,在第一加载后只有新数据加载到浏览器,提升了浏览器的性能。...ng-submit 、ng-change、 ng-disabled 这些常用指令一定要熟悉它们的用法,在实际工作很常用到。

    22630
    领券