在ng-click和服务Angular js之间传递参数

时间:2016-04-08 16:01:22

标签: angularjs

我有一个"搜索"用户输入一个值,我想在服务中发送此值,因为我希望另一个控制器可以访问。但是目前我不能这样做,如果有人可以帮助我,那么使用Angular js将是非常有用的。

和js



var app = angular.module('MainApp', [])

app.factory('Search', function($rootScope, $http){
var search = '';
	function setSearch(bus){
		search = bus;
	}
	function getSearch(){
		return search;
	}
	return{
		setSearch : setSearch,
		getSearch: getSearch

	};
	//return myFactory;
	/*
	$scope.Search = function() {
		return {
			getDoctor: function () {
				return $http.get('api/doctor' + $scope.search.searchText).then(function (response) {
					orders = response.data;
					$rootScope.$broadcast('handleSharedOrders', orders);
					return orders;
				})
			}
		};
	}*/
});

app.controller('mainController', function ($scope, $http, Search) {


	$scope.loadList = function() {
		location.href = "doctors";
	};

$scope.search.searchText = Search.getSearch();
	$scope.Search = function(bus) {
		console.log(bus);
		Search.setSearch(bus);


	}


	$scope.doctors = {};
	$http.get('/api/doctor').success(function (data) {
		$scope.doctors = data;
	})
		.error(function (data) {
			console.log('Error: ' + data);
		});


	/*
	$http.get('/api/doctor/' + specialty).success(function (data) {
		$scope.doctorsSpecialty = data;
	})
		.error(function (data) {
			console.log('Error: ' + data);
		});
*/


});

<!DOCTYPE html>
<html ng-app="MainApp">
<head lang="en">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<!-- Cargamos app -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script src="../Controllers/core.js"></script>
	<title></title>
</head>
<body ng-controller="mainController">
<div align="center">
	<img src="../img/logo.jpg" >
</div>





<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<div class="login-panel panel panel-default"  >
				<div class="panel-heading" >
					<h3 class="panel-title">Search Doctors</h3>
				</div>
				<div class="panel-body" >
					<form role="form"   >
						<fieldset>
							<div class="form-group" name="myForm"  >
								<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
							</div>
							<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
								<b align="center">Search</b>
							</button>
							<!-- Change this to a button or input when using this as a form -->
						</fieldset>
					</form>
				</div>

			</div>
			<div class="panel-heading" STYLE="background-color: #a7b5ce">
				<h3 class="panel-title">List of Doctors</h3>
			</div>
			<div class="panel-body" >
				<form role="form">
					<fieldset>
						<div class="form-group" name="myForm"  >
							<button class="btn btn-default" type="button" align="center" href=doctors ng-click="loadList()">
								<b>List of Doctors</b>
							</button>
						</div>
						<!-- Change this to a button or input when using this as a form -->
					</fieldset>
				</form>
			</div>
		</div>

	</div>

</div>



</body>
</html>
&#13;
&#13;
&#13;

谢谢你的帮助

2 个答案:

答案 0 :(得分:1)

您已定义search.searchText

<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">

在这里你试图只传递searchText(未定义):

<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
    <b align="center">Search</b>
</button>

您需要更改ng-model上的<input>以进行搜索&#39;或者将ng-click上的<button>更改为&#39;搜索(search.searchText)&#39;。如果您选择执行后者,您可能还需要在控制器中显式创建search对象。

答案 1 :(得分:1)

我认为你做得很好,但你的代码有一些错误。首先,您不是在范围内声明对象搜索,而是将属性searchText分配给它。所以你应该这样做:

$scope.search = {
        searchText: ''
    };

然后,在单击搜索的视图中,您传递的是searchText,但它应该是search.searchText。

看看这个:https://jsfiddle.net/jruizx/54xcmgqp/