angularjs input使用ng-model双向绑定无效问题

在开发中有时在input上使用ng-model进行双向绑定时一直不生效的问题

<input type="type" ng-model="inputText"/>
$scope.inputText = 123;
console.log($scope.inputText)
//undefined

而修改变量为

<input type="type" ng-model="model.inputText"/>
$scope.model = 
    {
        inputText : 123
     };
console.log($scope.model.inputText)
//123

绑定的变量却生效了

经过查证终于查清楚原因

''罪魁祸首''就是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创建一个子对象才行

 解决方式:

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

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

$scope.a = {num: '1'};

 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值