傳單傳說中的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

回答

相關問題