アクセスオブジェクトが自身のコントローラ内のコンポーネントに渡されました

Question

このコンポーネントが見つかりました。私はそのバインディングに渡されるデータにアクセスできます。 しかし、それだけのテンプレートです。私はそれを使って何かをするために、コンポーネント自身のコントローラ内のオブジェクトにアクセスする必要があります。そして、私はそれを理解して少し固執しています。ここで

はコンポーネントです：

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から来るオブジェクトにアクセスする必要があります。また、コンポーネントコントローラに表示されているものと同じものをコンポーネントテンプレートに表示してください。私はそのほとんどを成し遂げましたが、鎖のこの欠けているリンクだけです。

私は誰の助けにも感謝し、事前に助言します。

ありがとうございました

Answer 1

角度成分がbindToControllerがtrueに設定されているデフォルトでbindToController: false

を削除し、あなたがの範囲内のバインディングにアクセスすることができますコントローラ。ライン調整

は、その後、あなたのコントローラで：this.mpObjs = this.mpdata;

する

this.mpObjs = 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; 
     }); 
    } 
} 

}）（）;

Answer 2

私は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; 
     }); 
    }