• angular中的ng-if和ng-show的区别以及ng-if的作用域问题


      项目有个需求是区分用户的身份,需要设置显示两个浮动框,根据不同的身份显示相应的浮动框。

      点击成功显示,以为一切大吉了,但因为一个插件需要再设置初始化,设置成功后发现 因为插件使用的是一个div,如果有两个浮动框的话会导致初始化失败,不巧的是这还是个主要功能。


      想了想,就使用ng-if在他需要的时候再去创建这个dom节点,结果就是插件初始化成功了,但是ng-model的值取不到了。我转而用了ng-show去判断浮动框的显示与否,发现好像又回到了起点,插件初始化又不成功了,以前使用这两个的时候知道ng-if是通过判断表达式的值为true或false来决定是否创建dom节点,ng-show是通过判断表达式的值用css的display:none和display:block来显示和隐藏。想想自己的需求知道用ng-show是铁定不成功的,怎么办?查呗。

      经过提问和查阅之后,解释是这样的:官方解释ng-if :表达式内值为true是,生成标签内的DOM,否则移除官方解释ng-show:表达式内值为true是,显示标签内的DOM,否则隐藏。ng-if同no-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点。ng-if 表达式内的值初始为false的时候 他里面的由input的 model绑定的scope是不会存在作用域里面的,当if的值为true的时候,相当于生成了一个新的SCOPE值,但是原先的watch仍然是检测不到新生成的model的值的。

      这也就是说:

        ng-if这个指令单独开了一个作用域,它只可以继承,不可以进行往外传值,所以,必须要在要传值的地方给加上$parent

        例如我要将(ng-model=“item”),我要获得query,这是打印不出的,只能(ng-model=“$parent.item”);

      搜嘎,问题解决,大吉大利!

  • 相关阅读:
    Java单链表的实现方法汇总整理
    Java内存模型(JMM)图文并茂,条理清晰
    Java基础知识点整理(2021年最新版)
    Spring常见的77道面试题及答案(2021版)
    Python第二次学习知识点总结
    VUE学习十九,表单输入绑定v-model
    VUE学习十八,事件处理v-on
    VUE学习十七,列表渲染v-for
    VUE学习十五,Class与Style绑定
    VUE学习十四,侦听器
  • 原文地址:https://www.cnblogs.com/daimo/p/8472576.html
Copyright © 2020-2023  润新知