NG-hide & NG-Show in Leaflet Legend

Question

我尝试使用"ng-show"和"ng-hide"属性创建一个传单图例。
遗憾的是，图例不是在站点加载时创建的，而是在地图加载时创建的。如果直接使用 javascript 添加这些属性，它们似乎不起作用。

此代码：

  onAdd: function() {
    var controlDiv = L.DomUtil.create('div', 'air-quality-legend');
    controlDiv.setAttribute('ng-hide', 'true');
    controlDiv.className = "airQualityIndex";
    L.DomEvent
      .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
      .addListener(controlDiv, 'click', L.DomEvent.preventDefault);
    var table = document.createElement('table');
    var tr = document.createElement('table');
    var td = document.createElement('table');
    td.innerHTML = "test";
    tr.appendChild(td);
    table.appendChild(tr);
    controlDiv.appendChild(table);
    return controlDiv;
  }

生成该输出。
如前所述，当不应该有表格时，有一个表。有没有办法在运行时通过javascript添加"ng-hide"或"ng-show"？

提前感谢您的帮助。

Answer 1

您需要编译自定义控件的 DOM。为此，您需要将$compile注入控制器，然后在将控件添加到映射后，在控件实例上使用 getContainer 方法，并在其上运行$compile并将其附加到范围：

控制：

L.Control.Custom = L.Control.extend({
    onAdd: function () {
        var container =  L.DomUtil.create('div', 'leaflet-control-custom')
            header = L.DomUtil.create('h1', 'leaflet-control-custom-header', container);
        header.textContent = 'NG-Hide test';
        header.setAttribute('ng-hide', 'hide');
        return container;
    }
});

控制器：

angular.module('app').controller('controller', [
             '$scope', 'leaflet', '$compile',
    function ($scope,   leaflet,   $compile) {
        $scope.hide = false;
        leaflet.map.then(function (map) {
            var control = new L.Control.Custom().addTo(map);
            $compile(control.getContainer())($scope);
        });
    }
]);

这是Plunker上的一个工作示例：http://plnkr.co/edit/xzRwTp9OZ8Zp8v7ktt2c?p=preview