How To Pass The Selected Value From Different Controllers In Angularjs
Solution 1:
create a service that stores your state abbreviation
.factory('myFactory', function() {
var state = '';
return {
setState: function(val) {
state = val;
},
getState: function() {
return state;
}
}
}
then you can watch the getState function in this service in your controller.
$scope.$watch(function () {
return myFactory.getState();
}, function (val) {
// execute your get method with the new value or whatever you want to do
});
and of course make sure you inject all your dependencies appropriately.
further more why do all of these selects need their own controller? move all the http calls to services and have them all share the same scope.
Solution 2:
Is there any specific reason you want so many controllers? For the simple page you have, one is enough. And ng-change is the right way to go. First thing you need to do is to add ng-model to the state and city selects so that we have something for 2-way binding. And then use ng-change on the state select to receive the selected state and do corresponding action there for the city.
Example
<divng-app="myApp" ><divng-controller="myCtrl"><selectclass="form-control"ng-model="selectedState"ng-change="changedState(selectedState)"><optionng-repeat="state in states" >{{state.abbreviation}}</option></select><selectclass="form-control"ng-model="citiesController" ><optionng-repeat="city in cities" >{{city.city}}</option></select></div></div>js:
myApp.controller('myCtrl', function($http, $scope){
$scope.changedState=function(selectedState){
$http.get('url?state='+selectedState).success(data){
$scope.cities = data;
};
}
}
Or you can create a watch function for the selectedState to achieve the same thing. Hope this help~
Solution 3:
If you are trying to access the data from a url which is different than the domain your page is, you might be hitting the Same Origin Policy problem. Basically this is not a problem, but a security feature where a web browser permits scripts contained in web page A to access data in a web page B, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number.
One typical solution to deal with this problem is to pass a callback function name in the url of the web service.
somewebapiendpoint?callback=some_function_name
Provided the webapi endpoint will return the result wrapped inside some_function_name script. Since the server can execute script inside your page, you should be careful (basically trust the server :)) about this approach.
Another solution is to enable CORS
Solution 4:
In order to share data between controllers, you should create a service. However, in this case I would have a single controller on <div id="test"> that would have access to each of the select elements' ngModels.
<body><divid="test"ng-controller="MyFormController"><selectclass="form-control"ng-model="type"><optionng-repeat="types in row" >{{types.type}}</option></select><selectclass="form-control"ng-model="state"><optionng-repeat="state in states" >{{state.abbreviation}}</option></select><selectclass="form-control"ng-model="city"><optionng-repeat="city in cities" >{{city.city}}</option></select></div></body>Also, consider using the controllerAs syntax. It's better to keep your data out of the $scope, as it helps separate concerns and is more in line with Angular2 architecture.
Post a Comment for "How To Pass The Selected Value From Different Controllers In Angularjs"