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