If you're looking for suggestions, I have two options in mind. Let's start with a simple solution using events:
<div ng-controller="MyCtrl">
<map></map>
<button ng-click="updateMap()">call updateMap()</button>
</div>
app.directive('map', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
controller: function(){
$scope.updateMap = function(){
//ajax call here.
}
},
link: function($scope, element, attrs) {
$scope.$on('my.update.map.event', $scope.updateMap);
}
}
});
app.controller('MyCtrl', function ($scope) {
$scope.updateMap = function () {
$scope.$broadcast('my.update.map.event');
};
});
This method is not bad at all. It ensures that the root scope isn't affected (@Krishna's suggestion) and your map directive doesn't clutter your controller's scope (@Chandermani's advice).
Another choice, if you prefer to avoid using events, is to utilize the controllerAs syntax to expose your map directive's controller.
<div ng-controller="MyCtrl">
<map controller="mapController"></map>
<button ng-click="mapController.updateMap()">call updateMap()</button>
</div>
app.directive('map', function() {
return {
restrict: 'E',
replace: true,
scope: {
'controller': '=?'
},
template: '<div></div>',
controllerAs: 'controller',
controller: function(){
this.updateMap = function(){
//ajax call here.
}
},
link: function($scope, element, attrs, ctrl) {
ctrl.updateMap();
}
}
});
This approach is similar to @Chandermani's suggestion, but it clearly defines the relationship between your controller and your directive. By using the view, you can see that the map directive is exposing its controller as mapController within MyCtrl's scope.
(I came across this concept here).