ionic 搜索双向数据绑定失效

1.用data对象存储变化的数据

js:

$scope.data={};
$scope.data.keywords = "";
$scope.search = function(){
	$state.go("search",{keywords:$scope.data.keywords});
}

html:

<ion-view view-title="Home" hide-nav-bar="true">
		<ion-header-bar class="bar-dark" align-title="center">
		</ion-header-bar>
		<ion-content ng-controller="homeCtrl">
		<div class="item item-input-inset">
		    <label class="item-input-wrapper">
		      <input type="text" placeholder="搜索" ng-model="data.keywords">
		    </label>
		    <button class="button button-small ion-ios-search-strong" ng-click="search()">
		    </button>
		</div>
		</ion-content>
</ion-view>

2.把路由定义中的controller去掉，直接在模板文件中的ion-content上显示声明ng-controller="homeCtrl"，这样以前的代码就能起做用。

 

 

双向数据绑定失效的缘由：

首先，在ionic路由中定义了模板文件的controller后，ionic会在加载模板文件后，在模板文件的最顶级dom上（也就是ion-view）建立你的controller做用域$scope，而后因为ionic在我页面上的ion-content没有找到我显示声明的ng-controller，因此他会自动建立了一个匿名的做用域$scope2（这里我认为是ionic的内部机制会在ion-content上默认建立一层做用域，并无真的研究过），那么由于个人controller中定义了keywords，实际上这里是$scope.keywords，可是页面上实际显示的实际上是$scope2.keywords，这个值并无定义，根据angular的做用域继承关系，$scope2.keywords= $scope.keywords，当我改变该值的时候，变化的是$scope2.keywords，可是这时候$scope.keywords这个值是并无变化的。因此我在controller里面获取的$scope.keywords没有变化。

 

那么为何按上面2种方法修改能够解决这个问题呢？
首先当我把keywords改为了data.keywords后，$scope2继承的就是是$scope的data对象，而熟悉js的同窗都知道，修改$scope2.data对象中的引用则$scope.data也会改变，因此这种方法可使2层做用域中的值同时改变，在controller中获取到的值就是界面上同样的值了。
第二种方法去掉了路由中定义的controller，直接写在模板中的ion-content上，这样模板文件加载进来后，就只有ion-content上的一层做用域了，双向数据绑定固然就起做用了。（若是ng-controller写在模板文件的ion-view上，依然是没用的，因此我猜测ionic是会自动在ion-content上建立做用域）

参考文献：https://link.zhihu.com/?target=https%3A//github.com/xufei/blog/issues/18