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?
2 answers
solution1
0 2013-09-14 19:36:11
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/
solution2
0 2013-09-14 21:41:42
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)
}
}])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.