Come applicare la direttiva in modo condizionale in AngularJS?

Question

Desidero applicare una direttiva semplice in modo condizionale utilizzando ngAttr. Non capisco perché la mia direttiva sia sempre visualizzata. Quindi se ho una variabile indefinita/falsa voglio applicare la mia direttiva: dirr.

Quando si utilizza ngAttr, il allOrNothing bandiera $ interpolare viene utilizzato, quindi se qualsiasi espressione di una stringa interpolati in indefinito, l'attributo viene rimosso e non aggiunti all'elemento.

My code pen

<div ng-app="myApp" ng-controller="MainController" class="container-fluid"> 
    <h2 ng-bind="currentVersion"></h2> 
    <hr> 
    <div ng-attr-dirr="hidden || undefined">Default div</div> 
</div> 

angular.module('myApp',[]) 
.directive('dirr', function(){ 
    return { 
    restrict:'AE', 
    template:'<div>Div from directive</div>' 
    } 
}) 
.controller('MainController',['$scope', function($scope){ 
    $scope.currentVersion = 'Angular 1.3.6'; 
    $scope.hidden = undefined; 
}]) 
; 

Answer 1

Le risposte sono vere e la codice di esempio ha fornito opere per piccoli problemi, ma quando si tratta di risolvere questo problema su applicazioni di grandi dimensioni si consiglia di adottare questo approccio:

Updated Pen

<div ng-app="myApp" ng-controller="MainController" class="container-fluid"> 
    <h2 ng-bind="currentVersion"></h2> 
    <hr> 
    <div dirr value="{{hidden}}">Default div</div> 
    </div> 

.directive('dirr', function($log){ 
    var directiveInstance = { 
    restrict:'AE', 
    scope:{ 
     value:'@' 
    }, 
    link: function (scope, element, attrs, ctrl) { 
     if(attrs.value === 'true'){ 
     console.log('directive on !!'); 
     $log.debug('element',element); 
     element[0].innerHTML = '<div>hello ' + attrs.value + '</div>'; 
     } 
     else { 
     console.log('directive off !!'); 
     } 
    } 
    } 
    return directiveInstance; 
}) 

questo è più ordinata e non si può decidere di duplicare il codice utilizzando ngIf o ngSwitch direttive in div separato quando si ha qualcosa di simile:

<table> 
    <thead dirr value="{{statement}}"> 
    <tr> 
    <th> 
     CrazyStuffHere... 
    </th> 
    <th> 
     CrazyStuffHere... 
    </th> 
    .... 
    </tr> 
    </thead> 
</table> 

Answer 2

Si può fare uso della direttiva integrato di AngularJS ng-if per verificare la condizione ed eseguirlo condizionale.

Esempio:

<div ng-if="{some_condition}"> 
    <dirr></dirr> <!--Execute the directive on the basis of outcome of the if condition--> 
</div> 

Answer 3

documentazione Modulo

Tutte le direttive angolare disponibile Match nome attributo, nome di tag, commenti, o il nome della classe

così ogni volta angolare corrisponde a una diretiva con nome attributo, compila il modello e rende l'html indipendentemente da valore dell'attributo.

in ogni caso è possibile utilizzare la portata della direttiva template.so uso ng-pelle con la proprietà nascosta di portata

angular.module ('myApp', [])

.directive('dirr',function(){ 
    return{ 
     restrict:'AE', 
     template:'<div ng-hide="hidden">Div from directive</div>', 
    } 
}) 
.controller('MainController',['$scope', function($scope){ 
    $scope.hidden=false; 
}]);