Menu
I'm new to angular and I'm wondering how I can share a variable between controllers in angular. I'm using the following scripts -
In Main.js:
function MainCntl($scope) { ---code } function SearchCtrl($scope, $http) { $scope.url = 'http://10.0.0.13:9000/processAdHoc'; $scope.errorM = "No results"; $scope.search = function() { $http.post($scope.url, { "data" : $scope.keywords}). success(function(data, status) { $scope.status = status; $scope.data = data; $scope.result = data; alert('yes'); }) . error(function(data, status) { $scope.data = data || "Request failed"; $scope.status = status; alert('no'); $scope.result = "failed"; }); }; } In Index.html
<body ng-controller="MainCntl" > ---code <div ng-controller="SearchCtrl"> <form class="well form-search"> <div class="ui-widget"> <label for="tags"></label> <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a> <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" /> </div> </form> </div> ---code <p ng-model="result"> {{result}} </p> </body> Everything works well with the ajax I'm sending data and receiving a response, my question is as follows:
In the SearchCtrl function I have a variable called $scope.result that is later referred to in Index.html. If I insert the html code that contains that variable into the SearchCtrl controller it works fine but if it is in the MainCtrl controller it does not work. How can I share this variable between the controllers.
Thanks ahead
708
Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.
14) Which of the following is used to share data between controller and view in AngularJS? Answer: B: "using services" is the correct answer.
The difference between $broadcast() and $emit() is that the former sends the event from the current controller to all of its child controllers. That means $broadcast() sends an even downwards from parent to child controllers. The $emit() method, on the other hand, does exactly opposite.
Use a service and inject it to both controllers and refer your scope vars to the services variable.
Example:
angular.module("yourAppName", []).factory("myService", function(){ return {sharedObject: {data: null } } }); function MainCtrl($scope, myService) { $scope.myVar = myService.sharedObject; } function SearchCtrl($scope, $http, myService) { $scope.myVar = myService.sharedObject; } In your template do:
{{myVar.data}} See an example Uses Angular v1.1.5
The reason you put it in an inner object is to preserve your references, if you keep it without a "sharedObject", and change that object, your binding will be pointing to the old reference and wouldn't show anything in the template.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
