传单图例中的 ng-hide & ng-show

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

Produces that output.
正如所描述的那样，有一个 table ，但不应该有。有什么方法可以在运行时通过 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

传单图例中的 ng-hide & ng-show

ng-hide & ng-show in leaflet legend

arrays

angularjs

leaflet

ng-hide