Geek Answers Handbook

Set scope variable from external controller to angular

Is it possible to set the $ scope variable of the controller from outside the controller?

For example, if I have a controller:

app.controller('citySelectCtrl', ['$scope',function($scope){ }]);

And a function in a global scope that has an event handler. Now I want to set the $scope variable when this event happens. Is it possible? My global function:

 function initAutocomplete() { autocomplete = new google.maps.places.Autocomplete( /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')), { componentRestrictions: {'country': 'in'}, types: ['(cities)'] }); map = new google.maps.Map(document.getElementById('map'), { center: {lat: 22.5937, lng: 78.9629}, zoom: 5, minZoom: 5 }); } autocomplete.addListener('place_changed', function() { infowindow.close(); marker.setVisible(false); var place = autocomplete.getPlace(); if (!place.geometry) { window.alert("Autocomplete returned place contains no geometry"); return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } ---------------------------------------------------------- //SET $scope.city = place here ---------------------------------------------------------- infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker); });
+5
source share
6 answers

We can use the $injector to access Angular External Service Areas. For your example.

 // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } ---------------------------------------------------------- var elem = angular.element(document.querySelector('[ng-app]')); var injector = elem.injector(); var $rootScope = injector.get('$rootScope'); $rootScope.$apply(function(){ $rootScope.city = place //or city; }); ---------------------------------------------------------- infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker); });

and in your controller you can use.

 app.controller('citySelectCtrl', ['$scope','$rootScope', function ($scope,$rootScope) { $rootScope.city = {}; } ]);

Demo

More info ... this

Hope this helps

+1
source

use can use $ rootScope like this.

 app.controller('citySelectCtrl', ['$scope', '$rootScope', function($scope, $rootScope){ //$rootScope.city = place here; }]);

and use can access the variable in the global function

 function initAutocomplete() { //$rootScope.city = place here; }
0
source

You can try using $ broadcast from the root index $ to notify your controller that an event has occurred.

 //rootscope $rootscope.$broadcast("myevent",eventObjectToBePassed); //your controller $scope.$on("myevent",function(eventObject){ //do something });

A cleaner way is to embed the root directory in the service and create a sendEvent function to actually do $ rootscope. $ broadcast.

0
source

You cannot use the global scope variable directly when working with angular applications. The way it is recommended is to wrap this functionality in a directive and use the directive in your templates. This way you can access $scope to update the value. For instance:.

 angular.directive('mapAutoComplete', function () { return { restrict: 'E', link: function (scope, elem, attr) { // Add your map and autocomplete here // Now you can use the `scope` to update the $scope of the parent controller } } });

In your html use the following directive:

 <map-auto-complete></map-auto-complete>

This will cause the controller scope from the containing view to be available as scope in the directive

Contact them for recommendations on using directives on direct manipulations with the house and reusable functions http://ng-learn.org/2014/01/Dom-Manipulations/ fooobar.com/questions/70 / ...

0
source

I can think of two ways to do this.

  • Use $rootScope , which is an easy way to do this. But I personally don’t like it if it’s not a global variable.

  • Write an Eventhandler and listen in the controller

0
source

You can use var requiredElemScope = angular.element(ELEMENT_SELECTOR).scope(); to get the scope of the item. You can then assign the value to the scope variable as requiredElemScope.city = someValue;

Here ELEMENT_SELECTOR is the dom selector to which the controller is connected.

0
source

More articles:


All Articles