从角度控制器外部控制器设置范围变量

Question

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

For example, if I have a controller:

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

}]);

And a function in the global scope which has an event handler. Now I want to set a $scope variable when that 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's 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);
  });

Answer 1

We can use $injector for accessing Angular Services Outside Scope. 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 could use.

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

    }
]);

DEMO

For more details view this

Hope this helps

Answer 2

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 global function

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

Answer 3

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

//rootscope
$rootscope.$broadcast("myevent",eventObjectToBePassed);

//your controller
$scope.$on("myevent",function(eventObject){

//do something

});

A cleaner way would be to inject rootscope in a service and create a sendEvent function to actually do $rootscope.$broadcast.

Answer 4

You should not use a global scope variable directly when working with angular apps. The way it is recommended is to wrap this functionality in a directive and use the directive in your templates. This way you will hvae access to the $scope to update the value. Eg:

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 directive like this:

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

This will make the scope from the controller of the containing view available as scope within the directive

Refer these for best practices on using directives over direct dom manipulation and reusable functionality http://ng-learn.org/2014/01/Dom-Manipulations/ https://stackoverflow.com/a/15012542/3878940

Answer 5

I can think about two ways to do this

1. Use the $rootScope which is the easy way to do it. But I personally don't like it to much if it isn't really a global variable.

2. Write a Eventhandler and listen in the controller

Answer 6

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

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