javascript - 访问传递给其自己的 Controller 内的组件的对象

Question

所以我得到了这个组件。我可以访问传递到其绑定(bind)的数据。但仅限于它的模板。我需要访问组件自己的 Controller 中的对象来用它做一些事情。我有点难以弄清楚。

这是组件:

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 的对象。并在组件 Controller 中对它们执行一些操作，然后将其显示在组件模板中。我完成了大部分工作，只留下了链条中缺失的一环。

我感谢任何人的帮助，并提前提出建议。

谢谢

Answer 1

删除bindToController: false

默认情况下， Angular 组件将 bindToController 设置为 true，并允许您访问 Controller 范围内的绑定(bind)。

然后在 Controller 中调整行:

this.mpObjs = mpdata;

为this.mpObjs = this.mpdata;

我建议像这样布置代码，只是为了更好的可读性和更容易进行更改/使用并遵循 Angular 风格指南:

(函数(){ '使用严格';

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

})();