更改传单中控件的内容

时间:2018-07-03 14:53:07

标签: javascript leaflet angular-leaflet-directive

我从继承创建了一个新控件:

L.Control.extend({
            options: {
                position: position,

                descriptionHeader: 'This is a description',
                descriptionText: 'Label',

                counterHeader: 'This is a description',
                counterText: 'Label',

                className: 'leaflet-control-custom',
                labelClassName: 'button-label'
            },
            setDescriptionHeader(text: string){
                console.log("here");
                this.options.descriptionHeader = text;
            },
            setDescriptionText(text: string){
                this.options.descriptiontext = text;
            },
            setDescriptionCounterHeader(text: string){
                this.options.counterHeader = text;
            },
            setDescriptionCounterText(text: string){
                this.options.counterText = text;
            },
            onAdd: function (map) {
                let mainContainer: any = L.DomUtil.create('div', 'description-control');
                let container: any = L.DomUtil.create('div', 'description-options');
                let counterContainer: any = L.DomUtil.create('div', 'description-options-2');


                let header: HTMLElement = document.createElement("h2");
                header.className = 'description-title';
                header.innerText = this.options.descriptionHeader;
                container.appendChild(header);

                let text: HTMLElement = document.createElement("span");
                text.className = 'description-text';
                text.innerText = this.options.descriptionText;
                container.appendChild(text);


                let counter: HTMLElement = document.createElement("h2");
                counter.className = this.options.labelClassName;
                counter.innerText = this.options.counterHeader;
                counterContainer.appendChild(counter);

                let counterText: HTMLElement = document.createElement("span");
                counterText.className = this.options.labelClassName;
                counterText.innerText = this.options.counterText;
                counterContainer.appendChild(counterText);


                mainContainer.appendChild(counterContainer);
                mainContainer.appendChild(container);

                return mainContainer;
            }
        });

我希望在外部变量更改或触发操作时自动更新此控件内容:

我希望能够将一些变量传递给控件以更新其文本。 我已经尝试了几种解决方案,例如为变量设置设置器,但是不起作用。

该控件如下所示:

enter image description here

您能告诉我一种更新控件内容的方法吗?

谢谢

0 个答案:

没有答案