zoukankan      html  css  js  c++  java
  • 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”);

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

  • 相关阅读:
    获取URL中参数
    Javascript this指针
    10分钟了解C#中的协变和逆变
    BCB写的简单的EXCEL合并
    Codeforces Round #316 (Div. 2) D
    Codeforces Round #316 (Div. 2) E
    fzu1873 Coin Puzzle
    hdu 3629 Convex
    几何统计 ACM ICPC
    hdu 5135 Little Zu Chongzhi's Triangles
  • 原文地址:https://www.cnblogs.com/daimo/p/8472576.html
Copyright © 2011-2022 走看看