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

Question

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

inside your controller add var ctrl = this; then access like this this.mpObjs = ctrl.mpdata; — Pitchiah Natarajan
– Pitchiah Natarajan, Commented Nov 11, 2016 at 15:02
you explicitly turned off the behavior you want, with bindToController: false. — Claies
– Claies, Commented Nov 11, 2016 at 15:21

Prinay Panday · Accepted Answer · 2016-11-11 15:52:50Z

2

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

})();

edited Nov 11, 2016 at 15:52

answered Nov 11, 2016 at 15:04

Prinay Panday

2262 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Koller Over a year ago

Thank you, and when/where do i call activate()?

Peter Koller Over a year ago

Perfect, it works that way. Thank you for what you thaught me!

Pitchiah Natarajan · Accepted Answer · 2016-11-11 15:03:53Z

1

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

answered Nov 11, 2016 at 15:03

Pitchiah Natarajan

17910 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related