AngularJS में सशर्त रूप से निर्देश कैसे लागू करें?

Question

मैं ngAttr का उपयोग कर सशर्त रूप से एक सरल निर्देश लागू करना चाहता हूं। मुझे समझ में नहीं आता कि मेरा निर्देश हमेशा क्यों प्रदर्शित होता है। तो अगर मेरे पास अपरिभाषित/झूठा वैरिएबल है, तो मैं अपना निर्देश लागू करना चाहता हूं: 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 या अलग divs में 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

फार्म प्रलेखन

कोणीय द्वारा प्रदत्त निर्देशों से मेल नहीं खाता नाम, टैग नाम, टिप्पणियाँ, या वर्ग के नाम

तो जब भी विशेषता कोणीय विशेषता नाम के साथ एक गंभीरता से मेल खाता है, यह टेम्पलेट संकलित करता है और इसके बावजूद एचटीएमएल प्रस्तुत करता है मान बताइए।

वैसे भी आप गुंजाइश के छिपे संपत्ति के साथ 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; 
}]);