AngularJS解决ng-if中的ng-model值无效的问题

AngularJS解决ng-if中的ng-model值无效的问题

本篇文章主要介绍了AngularJS解决ng-if中的ng-model值无效的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。

    
a 的值: {{a}}
b 的值: {{b}}
普通方式:
ngIf方式:

在ng-if方式中,每个包含的元素都拥有自己的作用域,因此,复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域,所以,如果它想绑定控制器中的变量值,必须添加$parent标识,只有这样才能访问到控制器中的变量。

因此,解决ng-if中ng-model值无效的问题,主要方法就是在绑定值时添加$parent标识,或者用ng-show指令代替ng-if指令,这两种方法都可以达到同样的页面效果。

以上就是AngularJS解决ng-if中的ng-model值无效的问题的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读