AngularJS controllers scope issue

Question

I'm creating an app that use some angular-ui directives for example the ui-map directive and also its dependency ui-event the thing is that I want to create routes for diferent controllers that have some functinalities in common for example the acces to the gmap events. To achive that I've used the ng-View native directive of angular but the problem is that this directive creates a new scope so I don't have access to the previews scope. Maybe you could understand me better if you read the code.

angular.module('Maptesting', ['ngRoute', 'ui.map', 'ui.event'])

.config (function ($routeProvider) {
    $routeProvider

    .when('/', {

    })

    .when('/newSector', {
        templateUrl: 'newSector.html',
        controller: 'newSector'
    })
})


.controller('CtrlGMap', ['$scope', function($scope) {
    $scope.mapOptions = {
        center: new google.maps.LatLng(-54.798112, -68.303375),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        disableDefaultUI: true
    };

}])


.controller('newMarker', ['$scope', function($scope){
    $scope.myMarker = null;

    $scope.addMarker = function ($event, $params) {
           $scope.myMarker = new google.maps.Marker({
            map: $scope.myMap,
                position: $params[0].latLng,
                   })
       };
}])

HTML:

<body ng-controller="CtrlGMap" id="map">

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-event="{'map-click': 'addMarker($event, $params)'}" 
                                        ui-options="mapOptions"></div>

<div ui-map-info-window="myInfoWindow">
    <p>{{ name || "Set the name"}}</p>
</div>

<div ui-map-marker="myMarker"
     ui-event="{'map-click': 'openMarkerInfo(myMarker)'}">
</div>

<div ng-view></div>

How can I have access to the parent scope?

But how could I access the $event and the $params from the $parent? Something like $parent.$event ? — Facu Ferrari, Sep 14 '13 at 19:10
THe problem is that it doesn't even make the call to the addMarker() method. I think that this is because I don't have access to the ui-event scope because the ng-view directive creates a new scope. How could I pass the scope from the GMap controler to the newSector controller? — Facu Ferrari, Sep 14 '13 at 19:20

score 0 · Answer 1 · answered Sep 14 '13 at 19:36

0

You can use $rootScope

http://docs.angularjs.org/api/ng.$rootScope.Scope

or $emit() and $broadcast()

http://motionharvest.com/2013/03/21/passing-arugments-to-on-in-angularjs-from-emit-and-broadcast/

answered Sep 14 '13 at 19:36

Nitish Kumar

4,850
3
20
38

score 0 · Answer 2 · edited May 23 '17 at 11:50

You're looking at this the wrong way, scope inheritance is a bad idea for two way sharing between controllers like this.

here's a post that goes over scope inheritance in more detail: What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Generally when you want to share something betweeen controllers you should use services, put the functionality you want into a service and just inject it into the required controllers

If you want to create a plnkr or jsfiddle of your problem I could go into more detail.

Edit:

You're right, you don't have access to the newSector controller. You are not going to be able to access the addmarker function using this pattern. You need to read the link above and understand why you don't have access, and that you do not want to try doing this using controller inheritance.

You need to create separate controllers and templates for each of the views/functionality that you want. Any shared functions or variables you can put in a service, which you can inject into both controllers.

Config:

.when('/', {
    templateUrl: 'base.html',
    controller: 'BaseCtrl'
})
.when('/newSector', {
    templateUrl: 'addmarker.html',
    controller: 'AddMarkerCtrl'
})

Base template:

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-options="mapOptions"></div>

AddMarker template:

<div id="map_canvas" class="map-canvas" ui-map="myMap"
                                        ui-event="{'map-click': 'addMarker($event, $params)'}" 
                                        ui-options="mapOptions"></div>

Base controller:

.controller('BaseCtrl', ['$scope', function($scope, MyService) {
    $scope.mapOptions = MyService.options
}])

AddMarker controller:

.controller('AddMarkerCtrl', ['$scope', function($scope, MyService) {
    $scope.mapOptions = MyService.options

    $scope.addmarker = function() {
       MyService.addMarkerFunction($event, $params, $scope.myMap)
    }
}])

http://jsfiddle.net/BCSx2/ Heres is the jsfiddle. I think that I don't have access to the newSector controller from the CtrlGMap so I can access the .addMarker method when clicked on the map. — Facu Ferrari, Sep 14 '13 at 23:30
I need to call addMarker only when I'm on newSector URL so I don't add markers on the other view ... — Facu Ferrari, Sep 14 '13 at 23:38

AngularJS controllers scope issue

2 Answers2