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

Question

我想要一个“ map ”标签，其中应该包含“标记”标签。

我的问题是我想使用“map”父范围中的变量来设置“marker”属性。

如果我这样做:

    <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”读取为字符串。

我的 map 指令:

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 的 Angular 版本，您可以执行以下操作:

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>      

要使其在 Angular 1.0.x 中工作，您需要使用 scope:true 创建一个继承自父指令的子作用域，这样它们就不会相互冲突。