传单传说中的ng-hide＆ng-show

我尝试使用'ng-show'和'ng-hide'属性创建传单传说。
不幸的是，图例并非在网站加载时创建，而是在地图加载时创建。如果直接使用JavaScript添加属性，这些属性似乎不起作用。传单传说中的ng-hide＆ng-show

此代码：

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.
如所描述的，当有不应该有一个表。有没有什么办法在运行时通过javascript添加'ng-hide'或'ng-show'？

非常感谢您的帮助。

来源

2016-02-13 naechtner

您需要编译自定义控件的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

来源

2016-02-13 13:30:59 iH8

非常感谢你:) – naechtner

传单传说中的ng-hide＆ng-show

回答

相关问题