ng-model 在 ng-if 里面无效

ng-if指令的功能与ng-show指令相似，都用于控制元素的显示与隐藏，但两者又有区别，ng-if指令会移除DOM原有的元素，而ng-show指令只是将元素的”display”属性值设置为”none”。因此，在使用时必须根据实际的需要进行选择性使用。

 

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

 

为什么？

ng-if里面会生成一个子域，想要ng-model生效，需要在$scope创建一个子对象，才行，如$scope.obj，再将ng-model绑定到obj

 

解决问题：
1.使用ng-show(或ng-hide)可以间接解决这个问题。

 

2.使用$scope创建一个子对象

 

$scope.a = '1';//原来的代码
$scope.a = {num: '1'};//改变后

 在页面上获取

 

 

<input type="checkbox" ng-model="a">//原来的代码
<input type="checkbox" ng-model="a.num">//改变后

 

 

3.在页面添加$parent方法

 

<div ng-if="a">
            <input type="checkbox" ng-model="$parent.b">
</div>