ng-if作用域问题

最新推荐文章于 2021-02-26 10:02:51 发布
最新推荐文章于 2021-02-26 10:02:51 发布
阅读量1k 收藏 2
点赞数
分类专栏： angular 文章标签： ng-if作用域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013724078/article/details/83376479
版权

angular中我们经常会使用ng-if、ng-show来控制某个节点的显示与隐藏。

ng-if是移除节点，ng-show是隐藏节点

开发中我就遇到了一个问题，就是使用ng-if的节点内，ng-model绑定变量居然不起效果。一查才知道原来ng-if是有作用域问题的。

使用了ng-if会创建一个子级作用域，ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象。

如果ng-model想绑定$scope的变量，需要使用$parent，如下图所示

那记忆搁浅
关注
专栏目录
AngularJS解决ng-if中的ng-model值无效的问题
10-19
本篇文章主要介绍了AngularJS解决ng-if中的ng-model值无效的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ng-if小坑
浮华饰浮华的博客
03-29 661
前言ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。ng-if同ng-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。当一个元素被ng-if从DOM中移除，同它关联的作用域也会被...
angular中的ng-if和ng-show的区别以及ng-if的作用域问题
weixin_30449239的博客
02-26 337
　　项目有个需求是区分用户的身份，需要设置显示两个浮动框，根据不同的身份显示相应的浮动框。 　　点击成功显示，以为一切大吉了，但因为一个插件需要再设置初始化，设置成功后发现因为插件使用的是一个div，如果有两个浮动框的话会导致初始化失败，不巧的是这还是个主要功能。 　　想了想，就使用ng-if在他需要的时候再去创建这个dom节点，结果就是插件初始化成功了，但是ng-model的值取不到了。我...
ng-if会改变scope的作用域
weixin_30677073的博客
08-09 126
ng-if会改变scope的作用域 解决方法： 1.ng-if 父级作用域 parent scope去获取 2.ng-if 改为ng-show 转载于:https://www.cnblogs.com/lyxverycool/articles/7323687.html
ng-if
光英的记忆博客
04-10 669
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插 15入DOM中。 161718 查看第12章获得更详细信息。 ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
12-10
值得注意的是，ng-if还会创建一个新的作用域，该作用域通过原型继承自其父作用域。例如： ```html <div ng-if="isVisible"> <!-- 这部分只有当isVisible为真时才会被渲染 --> ``` 当试图给ng-if中的对象...
Angular.JS中指令ng-if的注意事项小结
10-19
这样的做法可以确保即使ng-if作用域被销毁并重新创建，数据的引用仍然指向同一个对象的属性，从而避免产生数据同步问题。这种对象属性的绑定方式，也使得数据的管理更为集中和模块化，有助于保持数据的一致性和追踪...
(十四)ng-if与ng-show、ng-hide指令的区别和注意事项
热门推荐
aty
03-30 7万+
angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide是通过改变CSS的display属性值来实现显示或隐藏的。ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。当一个元素被ng-if
ng-if指令
天马3798
12-14 9906
一、定义和用法 ng-if指令用于在表达式为false时移除html元素。 如果if语句执行结果为true，会添加移除元素，并显示。 ng-if指令不同于ng-hide，ng-hide隐藏元素，而ng-if是从DOM中移除元素。 语法： 参数值 值 描述 expression 如果表达式返回 false 则会移除整个元素，如果为 tru
data-ng-if
个人笔记
07-05 1156
angular js 的 if 语句使用例子： ▲▼
ng-if的使用
蜗蜗牛在路上的博客
05-09 1564
报警类型排序 {{obj.Description}}{{obj.Value}}
AngularJS之ng-if指令
牛栏山矿泉水
09-13 545
1、问题背景 AngularJS利用ng-if指令来判断对象元素是否为空 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html ng-app="ifApp"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS之ng-if指令&lt;/title&gt;
ng-model 在 ng-if 里面无效
liuchaoxue
06-20 238
ng-if指令的功能与ng-show指令相似，都用于控制元素的显示与隐藏，但两者又有区别，ng-if指令会移除DOM原有的元素，而ng-show指令只是将元素的”display”属性值设置为”none”。因此，在使用时必须根据实际的需要进行选择性使用。   ng-if指令会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加ng-model指令，那么ng-mod...
AngularJS ng-if 创建子scope作用域
xiaoguangtouqiang的博客
06-03 1624
AngularJS中ng-if/ng-switch时找不到scope下的定义的变量
【AngularJS】解决ng-if中的ng-model值无效的问题
weixin_44241821的博客
02-26 919
与其他指令一样，ng-if指令也会创建一个子级作用域，因此，如果在ng-if指令中添加了元素，并向元素属性增加 ng-model指令，那么ng-model指令对应的作用域属性子级作用域，而并非控制器注入的$scope作用域对象，这点在进行双向数据绑定时，需要引起注意。 a 的值： {{a}} b 的值： {{b}} 普通方式： ngIf方式：
AngularJS ng-if="" 表达式
坚持的专栏
05-17 4652
{{h.title}} 积分：ng-if="h.sell_price=='0.00'">{{h.point}}元 {{h.point}}+{{h.sell_price}}元 门店价：￥{{h.market_price}}元
ng-model在ng-if和ng-switch下绑定无效
qq_27868533的博客
11-16 549
原因：ng-if 或者 ng-switch 指令会创建一个子级作用域，因此使用 ng-model 在绑定变量时 $scope 是相对父作用域的，因此无法取到该变量。 解决方案： 1. 使用 ng-show 代替 ng-if &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2. 绑定变量时使用$parent.o...
AngularJS面试重点：ng-if与ng-show/hide、作用域与数组重复问题解析
- ng-if会创建新的作用域，而ng-show/hide不会。这可能导致在不同作用域间的数据同步问题。 - 为了避免作用域问题，建议使用对象属性（如data.x）而非基本变量（如x）进行数据绑定。 3. ng-repeat迭代数组时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值