ionic 这个坑有人踩过吗

2015-07-28 22:43:25 +08:00
 fszaer

在ion-content标签下
ng-model无法正常双向绑定
例如
页面中有一个

<input ng-model="input">

然后这时controller里
log( $scope.input)结果却是undefined

但是,如果在同一个页面其他地方
显示{{input}}则可以正常根据input的值的改变而改变

同样,如果在controller定义了
$scope.input="no",页面input框里会显示no,但是当我修改其值为"yes"
controller里log( $scope.input)结果是依然是no
.....

而且这个问题只在ion-content标签里面操作时会出现orz

2811 次点击
所在节点    问与答
7 条回复
horizon
2015-07-29 11:03:44 +08:00
你可能需要$scope.apply()一下?我瞎说的。
jerray
2015-07-29 12:10:44 +08:00
要在某个回调里面访问 $scope.input 它才会是新的值的,比如 ng-click 或者 $timeout 之类的(实际上这里隐含着 $scope.$digest 的调用)。在controller里写的log函数只会在controller初始化的时候执行,打印的当然都是初始化时候的值了。
fszaer
2015-07-29 13:20:50 +08:00
@jerray 我可能我忘了说
在controller里写的log函数就是写在ng-cilck里触发的,所以并不初始值的问题
我说的第二个例子就是表达这个意思

初始值为no,修改值为yes,修改之后调用log()打印的依然是no

另一个例子
$scope.input初始值为1,设置一个ng-cilck函数在controller里让$scope.input++,并且打印出来

可以看见页面的input框的值同步递增,但是一旦修改input框的值后,其值不在同步递增,而$scope.input的打印结果依然在增加,也就是它们之间的双向绑定显然是不正常的

我不太搞得清楚这个问题具体是什么回事,
不过我猜想是ion-content这个指令的某些设定破坏了双向绑定的正常运行
jerray
2015-07-29 14:36:52 +08:00
@fszaer 试了一下发现并没遇见这个问题。代码贴上来看看?
fszaer
2015-07-29 16:06:35 +08:00
@jerray
嗯,用的是官方sidemenu的初始项目
其他一些关键改动在这了

https://gist.github.com/Tk-archer/5cec769e6619ae1bff38
在我本地的运行结果是
value, undefined
也就是
$scope.textarea没有定义
而视图中的textarea却可以作为参数传入到函数中,并且打印出来的
jerray
2015-07-29 19:23:58 +08:00
@fszaer 看了ionic的源码,ionContent基于你的controller创建了一个新的child scope,于是在ion-content对textarea属性赋值时,新的值绑定到了这个child scope上。
之前看过一篇文章的建议是,把这种数据放在一个对象上,这样就可以通过原型链来访问到controller scope上的那个数据对象,这样用起来就没问题了。
这其实是AngularJS的坑,先找一些best practices看吧。
fszaer
2015-07-29 22:55:08 +08:00
@jerray
惊了,原来是这样,感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/209048

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX