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”);
搜嘎,问题解决,大吉大利!