傳遞給它自己的控制器內的組件的訪問對象

所以我得到了這個組件。我可以訪問傳遞給綁定的數據。但只限於它的模板。我需要訪問組件自己的控制器中的對象來做一些事情。我有點卡住搞清楚了。傳遞給它自己的控制器內的組件的訪問對象

以下是部分：

angular.module('MpWatchModule').component('mPointlite', { 
    bindToController: false, 
    restrict: 'E', 
    templateUrl: '/NG-MPWatch/Templates/mPointLite.html', 
    controller: function (NgMap) { 
     this.googleMapsUrl = 'https://maps.google.com/maps/api/js?key=<my_api_key>'; 
     NgMap.getMap().then(function (map) { 
      this.map = map; 
      this.map.setMapTypeId('terrain'); 
      // this.map.setMapTypeId('satellite'); 
      this.mpObjs = mpdata; 
     }); 
    }, 
    controllerAs: 'mpl', 
    bindings: { 
     mpdata: '<', 
    }, 
});

這裏是在組件模板標記：

<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{mpl.googleMapsUrl}}"> 
    <ng-map center="Hungary" 
      zoom="8" 
      class="gmap" 
      disable-default-u-i="true" 
      draggable-cursor="auto" 
      max-zoom="15" 
      min-zoom="8" 
      liteMode="true" 
      tilt="0"> 
     <div ng-repeat="m in mpl.mpObjs"> 
      <marker position="{{m.position}}"> 
      </marker> 
     </div> 
    </ng-map> 
</div>

下面是從頁標記：

<m-pointlite mpdata="mpdl.mpObjs"> 
</m-pointlite>

什麼我將需要訪問來自頁面上mpdl.mpObjs的對象。並在組件控制器中對它們做一些事情，而不是在組件模板中顯示它們。我完成了大部分工作，只是鏈條中這個缺失的環節。

我很感謝任何人的幫助，並提前告知。

謝謝

來源

2016-11-11 Peter Koller

在你的控制器裏添加** var ctrl = this; **然後像這樣訪問** this.mpObjs = ctrl.mpdata; ** –

你**明確關閉**你想要的行爲，用'bindToController：返回FALSE。 – Claies

刪除bindToController: false

默認的角度成分已經bindToController設置爲true，可以讓你的範圍內訪問綁定控制器。

在您的控制器

然後調整行：

this.mpObjs = mpdata;

是this.mpObjs = this.mpdata;

我建議鋪設碼出像這樣只是爲了更好的可讀性，更容易做出更改/工作，並遵循角風格指南：

（函數（）{ '使用嚴格';

angular 
    .module('MpWatchModule') 
    .component('mPointlite', { 
     restrict: 'E', 
     bindings: { 
      mpdata: '<', 
     }, 
     templateUrl: '/NG-MPWatch/Templates/mPointLite.html', 
     controller: PointLiteController, 
     controllerAs: 'mpl' 
    }); 

PointLiteController.$inject = ['NgMap']; 

function PointLiteController(NgMap) { 
    var mpl = this; 
    mpl.googleMapsUrl = 'https://maps.google.com/maps/api/js?key=<my_api_key>'; 

    activate(); 

    function activate() { 
     NgMap.getMap().then(function (map) { 
      mpl.map = map; 
      mpl.map.setMapTypeId('terrain'); 
      mpl.mpObjs = mpl.mpdata; 
     }); 
    } 
}

}）（）;

來源

2016-11-11 15:04:45

謝謝，我何時/在哪裏打電話激活（）？ –

對不起，我更新了上面的代碼。 –

完美，它的工作方式。謝謝你給我的印象！ –

我只是把JS代碼單獨。嘗試像下面你會得到內部控制器綁定

JS：

controller: function (NgMap) { 
     var ctrl = this; 
     this.googleMapsUrl = 'https://maps.google.com/maps/api/js?key=<my_api_key>'; 
     NgMap.getMap().then(function (map) { 
      this.map = map; 
      this.map.setMapTypeId('terrain'); 
      // this.map.setMapTypeId('satellite'); 
      this.mpObjs = ctrl.mpdata; 
     }); 
    }

來源

2016-11-11 15:03:53

傳遞給它自己的控制器內的組件的訪問對象

回答

相關問題