Как применять директиву условно в AngularJS?

Question

Я хочу применить простую директиву условно, используя ngAttr. Я не понимаю, почему моя директива всегда отображается. Поэтому, если у меня есть переменная undefined/false, я хочу применить свою директиву: dirr.

При использовании ngAttr, в allOrNothing флага $ интерполирует используется, так что если любое выражение в интерполированных результатах строки в неопределенных, атрибут удаляется и не добавляется к элементу.

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

ответы верны и пример кода вы предоставили работу для мелких вопросов, но когда речь идет о решении этой проблемы на больших приложениях, которые вы можете принять этот подход:

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

Это более аккуратный и вы не можете продублировать свой код, используя ngIf или ngSwitch директивы в отдельном дивы, когда у вас есть что-то вроде:

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

Answer 2

Вы можете использовать встроенные директивы AngularJS ng-if игровых для проверки состояния и выполнить его условно.

Пример:

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

Answer 3

Форма документации

Все Угловое предоставленные директивы совпадать с именем, имя тега, комментарии или имя класса

так, когда атрибут угловой соответствует директиве с именем атрибута, он компилирует шаблон и отображает html независимо от значение атрибута.

в любом случае вы можете использовать рамки в директиве template.so использования нг скрытие со скрытым свойством прицела

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