angular.js嵌套的指令作用域范围属性

Question

我想要一个“地图”标记女巫应该包含“标记”标记。

我的问题是，我想使用“地图”父作用域中的变量来设置“标记”属性。

如果我这样做：

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

我的代码工作，但我想这样做：

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

现在我可以读“LAT”作为一个字符串。

我的地图指示：

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

}]）;

我的标记指令：

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

Answer 1

假设你正在使用支持controllerAs一个角的版本，你可以这样做：

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>  

对于它在角1.0.x的工作您需要使用scope:true来创建从父指令继承的子范围，以便它们不会相互冲突。