ionic+angular 开发 controller不同问题

简单说一下，最近在实用ionic+angular开发 微信页面的时候，出现了作用域不同的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ionic.min.css"/>
		<script type="text/javascript" src="js/ionic.bundle.js"></script>
	</head>
	<body ng-app="myApp">
		<div ng-controller="myCon">
			<ion-header-bar class="bar-positive">
				<button class="button button-clear icon ion-arrow-left-c"></button>
				<p class="title">搜索</p>
				<button class="button button-clear icon ion-navicon"></button>
			</ion-header-bar>
			
			<ion-content class="has-header">
				
				<ion-list>
					<ion-item class="item-input-inset">
						<label class="item-input-wrapper">
						  	<input type="text" placeholder="请输入关键词" ng-model="souSuo.Situation">
						</label>
						<button class="button button-clear button-small button-positive">
						  	搜索
						</button>
					</ion-item>
					<ion-item ng-repeat="list in myData|filter:souSuo">
						{{list.Situation}}
					</ion-item>
				</ion-list>
				
			</ion-content>
			
		</div>
	</body>
	<script type="text/javascript">
		var myAp=angular.module("myApp",["ionic"]);
		myAp.controller("myCon",["$scope","$http","$filter",function($scope,$http,$filter){
			$http({
				"url":"csl-data.json"
			}).success(function(data){
				$scope.myData=data;
				console.info(data);
			}).error(function(){
				alert("加载失败");
			});
		}]);
	</script>
</html>

　　如上面这个demo中，input里面的ng-model绑定的数据无法同步，原因是controller的创建顺序问题，ng-model中的数据和下面myCon的controller并非在同一个作用域下，所以会产生无法双向绑定的问题，筛选功能也无法实现。解决方法是把其定义在同一个作用域下。如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ionic.min.css"/>
		<script type="text/javascript" src="js/ionic.bundle.js"></script>
	</head>
	<body ng-app="myApp">
		<div ng-controller="myCon">
			<ion-header-bar class="bar-positive">
				<button class="button button-clear icon ion-arrow-left-c"></button>
				<p class="title">搜索</p>
				<button class="button button-clear icon ion-navicon"></button>
			</ion-header-bar>
			
			<ion-content class="has-header">
				
				<ion-list>
					<ion-item class="item-input-inset">
						<label class="item-input-wrapper">
						<!--ng-model和angular的作用于不在一个作用域中，也就是不在一个controller里面，需要在它的父级作用于中绑定ng-model，具体解决办法如下-->
						  	<input type="text" placeholder="请输入关键词" ng-model="$parent.souSuo.Situation">
						</label>
						<button class="button button-clear button-small button-positive">
						  	搜索
						</button>
					</ion-item>
					<ion-item ng-repeat="list in myData|filter:souSuo">
						{{list.Situation}}
					</ion-item>
				</ion-list>
				
			</ion-content>
			
		</div>
	</body>
	<script type="text/javascript">
		var myAp=angular.module("myApp",["ionic"]);
		myAp.controller("myCon",["$scope","$http","$filter",function($scope,$http,$filter){
			$http({
				"url":"csl-data.json"
			}).success(function(data){
				$scope.myData=data;
				console.info(data);
			}).error(function(){
				alert("加载失败");
			});
		}]);
	</script>
</html>

　　使用$parent.的方法绑定，可以将ng-model作用域绑定在父级作用域下，从而实现数据的双向绑定。

posted @ 2017-04-06 10:29  Cookie_ss  阅读(141)  评论(0)    收藏  举报