Come nascondere una scheda nell'interfaccia utente di avvio angolare utilizzando ng-show/ng-hide

Question

Sto utilizzando l'interfaccia utente di avvio angolare per mostrare un gruppo di schede. Lo script che includo è ui-bootstrap-tpls-0.6.0.min.js e alcuni file HTML template.

qui è il mio markup:

<tabset> 
    <tab ng-hide="!hideme"> 
     <tab-heading> 
      tab1 
     </tab-heading> 
     <div> 
      tab content 1 
     </div> 
    </tab> 
    <tab ng-hide="hideme"> 
     <tab-heading> 
      tab2 
     </tab-heading> 
     <div> 
      tab content 2 
     </div> 
    </tab> 
</tabset> 

qui è il mio controller

function myController($scope) { 
    $scope.hideme = true; 
}); 

Questo codice non funziona (il 2 ° scheda non nasconde). Qual è il trucco per applicare l'attributo ng a una direttiva personalizzata?

Answer 1

La direttiva tab crea un nuovo ambito, quindi è necessario utilizzare $parent per accedere al modello. Prova

ng-hide="$parent.hideme" 

Answer 2

Prima Soluzione: utilizzare sia ng-show e ng-nascondere

<tabset> 
<tab ng-show="hideme"> 
    <tab-heading> 
     tab1 
    </tab-heading> 
    <div> 
     tab content 1 
    </div> 
</tab> 
<tab ng-hide="hideme"> 
    <tab-heading> 
     tab2 
    </tab-heading> 
    <div> 
     tab content 2 
    </div> 
</tab> 

seconda soluzione: scrivere una direttiva

.directive("hideTab", function() { 
    return function(scope, elm, attrs) { 
     scope.$watch(function() { 
      $(elm).css("display", "none"); 
     }); 
    }; 
});