angular的数据双向绑定在ionic的二级view中失效?
发布于 2年前 作者 zerozaki0752 3886 次浏览 来自 问答

我用ionic创建了一个side工程 这个工程的路由逻辑大致是 :

  • index.html

  •   body 
    
  •       ion-nav-view
    
  • meun.html

  •   ion-side-menus
    
  •       ion-side-menu-content
    
  •           ion-nav-view
    
  • playlists.html

  •   ion-view
    
  •       ion-content
    

我在playlists.html 中加了一个ng-model=’myNumber’

  • <ion-view view-title="Playlists">
  •   <ion-content>
    
  •   <input type="text" ng-model='myNumber' />
    
  •    {{myNumber}}
    
  •   </ion-content>
    
  • </ion-view>

在controller.js中监听myNumer

  •   .controller('PlaylistsCtrl', function($scope) {
    
  •       $scope.myNumber = "123";
    
  •       $scope.$watch('myNumber', function(newValue, oldValue) {
    
  •           console.log(oldValue+" "+newValue);
    
  •       });
    
  •   setInterval(function() {
    
  •       console.log($scope.myNumber);
    
  •   }, 2000);
    
  • })

实际效果是: 首次加载playlists时 打印了oldValue newValue 值为 123 123 之后修改input的值 只用view中的{{myNumber}} 相应发生了变化 controller中的$scope.myNumber一直是123

也就是view中model变化了 但是controller中的model 却没变? controller–>model–>view view–>model -x->controller 不在这个side框架中是没有问题的 请教大神这是什么情况呢? 谢谢!!!!!!!!!!!!!

4 回复

这里有一个回复可以参考下,http://forum.ionicframework.com/t/why-does-this-scope-watch-not-work/9430
当你修改一个原始类型的值的时候会得到一个新的引用,所以需要用一个object 包装一下,然后watch 这个 object:

$scope.model = {myNumber: 123};
$scope.$watch('model.myNumber', function(newValue, oldValue) {
    console.log(oldValue + " " + newValue);
});
setInterval(function() {
    console.log($scope.model.myNumber);
}, 2000);

页面部分:

<input type="text" ng-model='model.myNumber' />
{{model.myNumber}}

楼上说得对

@DongHongfei 非常感谢回答!!! 确实 问题解决了 想就这个问题在探讨下 我自己解决的这个问题的方法是 去掉 <ion-content> 标签 或者见这个将这个标签改为 <ion-content ng-controller="PlaylistsCtrl"> 这样给他知名作用域 不知道像是您提供的使用object包装 和 我的这个指明作用域 都什么原理呢? 我对于我这个方法的理解是 DOM元素不会创建新的作用域 但是ion-content会重建新的作用域 Ctrl中的$scope是没法$watch到ion-content这个心作用域的model变化的 除非这样:

<ion-content ng-controller="PlaylistsCtrl"> 

这样是给ion-content指定作用域 使ion-content仍然属于这个Ctrl作用域 这样Ctrl的$scope就可以监听model变化了 不知道对不对了?

PS : ionicframework.com这个网站即便开了VPN访问依然很艰难,何解?

@zerozaki0752 这样子写也没错,是要通过绑定才可以;一般来说,会通过state路由来管理这些绑定关系,在ion-content里面写ng-controller太不方便也不好管理

回到顶部