angular.js nested directive scope scope attribute

Question

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);
  }
}}]);

have you tried using this.markers = $scope.markers = [];?

pocesar
– pocesar

2014-05-13 05:28:13 +00:00
Commented May 13, 2014 at 5:28 — pocesar
– pocesar, Commented May 13, 2014 at 5:28

pocesar · Accepted Answer · 2014-05-12 22:01:05Z

1

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.

edited May 12, 2014 at 22:01

answered May 11, 2014 at 23:05

pocesar

7,0707 gold badges58 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jurgo Boemo Over a year ago

I've tested but it don't work. My angular version is 1.0.7.

pocesar Over a year ago

then it won't work. controllerAs were implemented in 1.2.0 (and pre-release versions).

Jurgo Boemo Over a year ago

thanks, I've updated the angular version and I've used "controllerAs: 'marker'," as you suggested

Collectives™ on Stack Overflow

angular.js nested directive scope scope attribute

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related