Angular.js嵌套指令scope scope属性

angular.js nested directive scope scope attribute

本文关键字:scope 属性 指令 嵌套 js Angular      更新时间:2023-09-26

我想给一个"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>      

现在我只能把" late "读成字符串。

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

}]);

my marker指令:

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

假设你使用的是支持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来创建一个从父指令继承的子范围,这样它们就不会相互冲突。