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

默认情况下，一个角度组件将bindToController设置为true，并允许您访问控制器范围内的绑定。

然后在你的控制器中调整行：

this.mpObjs = mpdata;

为this.mpObjs = this.mpdata;

我建议像这样放置代码，只是为了更好的可读性，更容易进行更改/使用并遵循角度样式指南：

（function（）{ ＆＃39;使用严格的＆＃39;;

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

访问对象传递给它自己的控制器

2 个答案: