CODEWITHSUNDEEP
javascriptangularjs
Peter Koller
Peter Koller

Reputation: 310

Access object passed to a component inside it's own controller

So i got this component. and i can access the data that is passed to its bindings. But only in it'template. I need to access the object in the component's own controller to do some stuff with it. And i am a bit stuck figuring it out.

Here is the component:

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: '<',
    },
});

And here is the markup in the components template:

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

Here is the markup from the page:

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

And what i will need is to access the objects coming from the mpdl.mpObjs on the page. And do some stuff with them in the components controller, than display it in the components template. I accomplished most of it, just this missing link in the chain.

I appreciate anyone's help, and advise in advance.

Thanks

Upvotes: 0

Views: 75

Answers (2)

Prinay Panday
Prinay Panday

Reputation: 226

Remove bindToController: false

By default an angular component has bindToController set to true and allows you to access the bindings within the scope of the controller.

Then in your controller adjust the line:

this.mpObjs = mpdata;

to be this.mpObjs = this.mpdata;

I would suggest laying the code out like so just for better readability and easier to make changes/work with and follows the angular style guide:

(function () { 'use strict';

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

})();

Upvotes: 2

Pitchiah Natarajan
Pitchiah Natarajan

Reputation: 179

I'm just putting the JS code alone. Try like below you will get the bindings inside controller

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

Upvotes: 1

Related Questions