CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Jurgo Boemo
Jurgo Boemo

Reputation: 1768

angular.js nested directive scope scope attribute

I would like to to a "map" tag witch should contains "marker" tags.

my problem is that I would like to set the "marker" attributes using variables from the "map" parent scope.

if I do this:

    <map center="{{userPosition}}">
        <marker lat="13.555232324" lng="43.555232324" text="Text1" on-click="callback('id_0')" ></marker>
    </map>

my code works, but I would like to do something like:

    <map center="{{userPosition}}">
        <marker lat="{{nearRooms['id_0'].lat}}" lng="{{nearRooms['id_0'].lng}}" text="Text1" on-click="callback('id_0')" ></marker>
    </map>

right now I can just read "lat" as a string.

my map directive:

ngBMap.directive('map', [ function ($compile){
return {
  restrict: 'E',
  controller: ['$scope', function($scope) {
    this.markers = [];
    $scope.markers = [];
    this.mapHtmlEl = null   
    this.map = null;

    this.exeFunc = function(func, context, args){
        $scope.$parent[func].apply(context, args)
    }
    this.initializeMarkers = function(){
        for (var i=0; i<this.markers.length; i++) {
            var marker = this.markers[i];
            this.map.entities.push(marker);         
        }
    }
    this.initializeMap = function(scope, elem, attrs){
            var map_canvas =  document.createElement('div')
            var _thisCtrl = this;
            ....
        this.mapHtmlEl = map_canvas;    
    }
    this.setCenter = function(position){
        var position = eval(position)
        var _position = new Microsoft.Maps.Location(position[0], position[1])
        if(this.map)
            this.map.setView({center : _position});
    } 
  }],
  scope: {
    'center': '@', 
  },
  link: function(scope, element, attrs, ctrl) {
     scope.$watch('center', function(center) {
        console.log('center: '+center)
        if(center){
            ctrl.setCenter(center)  
        }
      }, false);
    ctrl.initializeMap(scope, element, attrs)
    element.html(ctrl.mapHtmlEl)
  }
}

}]);

my marker directive:

ngBMap.directive('marker', [ function ($compile){
return {
  restrict: 'E',
  require: '^map',
  link: function(scope, element, attrs, mapController) {
      console.log('marker init')
        var getMarker = function() {
            var lat = attrs.lat
            .....
            var marker =  _marker;  
            return marker;
        }//end getMarker
        var marker = getMarker();
        mapController.markers.push(marker);
  }
}}]);

Upvotes: 0

Views: 278

Answers (1)

pocesar
pocesar

Reputation: 7050

Assuming you are using an Angular version that supports controllerAs, you can do this:

ngBMap.directive('marker', [ function ($compile){
  return {
    restrict: 'E',
    require: '^map',
    controllerAs: 'marker',
    link: function(scope, element, attrs, mapController) {
      var lat = attrs.lat

<map center="{{userPosition}}">
    <marker lat="{{marker.nearRooms['id_0'].lat}}" lng="{{marker.nearRooms['id_0'].lng}}" text="Text1" on-click="marker.callback('id_0')" ></marker>
</map>

For it to work in Angular 1.0.x you need to use scope:true to create a child scope that inherits from the parent directive so they don't conflict with each other.

Upvotes: 1

Related Questions