यदि स्थानांतरित सामग्री खाली हैं तो तत्व को कैसे छिपाना है?

Question

मैंने एक बहुत ही सरल निर्देश बनाया जो एक कुंजी/मूल्य जोड़ी प्रदर्शित करता है। यदि स्थानांतरित सामग्री खाली है (या तो शून्य लंबाई या केवल सफेद जगह) तो मैं तत्व को स्वचालित रूप से छुपा सकूंगा।

मैं यह नहीं समझ सकता कि निर्देश के भीतर से निष्पादित सामग्री तक कैसे पहुंचे।

app.directive('pair', function($compile) { 
    return { 
    replace: true, 
    restrict: 'E', 
    scope: { 
     label: '@' 
    }, 
    transclude: true, 
    template: "<div><span>{{label}}</span><span ng-transclude></span></div>" 
    } 
}); 

उदाहरण के लिए, मैं निम्नलिखित तत्व प्रदर्शित करना चाहता हूं।

<pair label="My Label">Hi there</pair> 

लेकिन अगले दो तत्व छुपाए जाने चाहिए क्योंकि उनमें कोई टेक्स्ट सामग्री नहीं है।

<pair label="My Label"></pair> 
<pair label="My Label"><i></i></pair> 

मैं कोणीय के लिए नया हूं इसलिए इस तरह की चीज को बॉक्स से बाहर करने का एक शानदार तरीका हो सकता है। किसी भी मदद की सराहना की है।

Answer 1

करके आप देख सकते है, तो transcluded एचटीएमएल पाठ की लंबाई है टेम्पलेट पर ng-show और compile transcludeFn भीतर का उपयोग कर एक तरीका है।

कोई पाठ लंबाई ng-show को छिपाने के लिए

app.directive('pair', function($timeout) { 
    return { 
    replace: true, 
    restrict: 'E', 
    scope: { 
     label: '@' 
    }, 
    transclude: true, 
    template: "<div ng-show='1'><span>{{label}} </span><span ng-transclude></span></div>", 
    compile: function(elem, attrs, transcludeFn) { 
      transcludeFn(elem, function(clone) { 
       /* clone is element containing html that will be transcludded*/ 
       var show=clone.text().length?'1':'0' 
       attrs.ngShow=show; 
      }); 
     } 
    } 
}); 

Plunker demo

Answer 2

मैं ट्रांसफर से बहुत परिचित नहीं हूं इसलिए यह सुनिश्चित नहीं करता कि यह मदद करता है या नहीं।

लेकिन निर्देश कोड के अंदर खाली सामग्री की जांच करने का एक तरीका iElement.text() या iElement.context ऑब्जेक्ट का उपयोग करना है और फिर इसे छुपाएं।

Answer 3

मैं इसे इस तरह से किया था, controllerAs का उपयोग कर सेट किया जाता है।

/* निर्देश के अंदर */

  controllerAs: "my", 
controller: function ($scope, $element, $attrs, $transclude) { 
//whatever controller does 
}, 
     compile: function(elem, attrs, transcludeFn) { 
        var self = this; 
        transcludeFn(elem, function(clone) { 
         /* clone is element containing html that will be transcluded*/ 
         var showTransclude = clone.text().trim().length ? true : false; 
         /* I set a property on my controller's prototype indicating whether or not to show the div that is ng-transclude in my template */ 
         self.controller.prototype.showTransclude = showTransclude; 
        }); 
       } 

/* टेम्पलेट के अंदर */

<div ng-if="my.showTransclude" ng-transclude class="tilegroup-header-trans"></div> 

Answer 4

पूर्व में प्रदान की जवाब मददगार थे लेकिन पूरी तरह से मेरी स्थिति का समाधान नहीं है, इसलिए मैं के साथ आया था एक अलग निर्देश बनाकर एक अलग समाधान।

एक विशेषता-आधारित निर्देश (यानी restrict: 'A') बनाएं जो कि यह देखने के लिए जांच करता है कि सभी तत्व के बच्चे नोड्स पर कोई टेक्स्ट है या नहीं।

function hideEmpty() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attr) { 
      let hasText = false; 

      // Only checks 1 level deep; can be optimized 
      element.children().forEach((child) => { 
       hasText = hasText || !!child.text().trim().length; 
      }); 

      if (!hasText) { 
       element.attr('style', 'display: none;'); 
      } 
     } 
    }; 
} 

angular 
    .module('directives.hideEmpty', []) 
    .directive('hideEmpty', hideEmpty); 

आप केवल मुख्य तत्व जाँच करना चाहते हैं:

link: function (scope, element, attr) { 
    if (!element.text().trim().length) { 
     element.attr('style', 'display: none;'); 
    } 
} 

मेरी समस्या का समाधान करने के लिए, सब मैं जरूरत अगर कोई बच्चा नोड्स थे जांच करने के लिए किया गया था:

link: function (scope, element, attr) { 
    if (!element.children().length) { 
     element.attr('style', 'display: none;'); 
    } 
} 

YMMV

Answer 5

यदि आप हर बार एनजी-शो का उपयोग नहीं करना चाहते हैं, तो आप इसे स्वचालित रूप से करने के लिए निर्देश बना सकते हैं:

.directive('hideEmpty', ['$timeout', function($timeout) { 

    return { 
     restrict: 'A', 

     link: { 
      post: function (scope, elem, attrs) { 
       $timeout(function() { 
        if (!elem.html().trim().length) { 
         elem.hide(); 
        } 
       }); 
      } 
     } 
    }; 

}]); 

फिर आप इसे किसी भी तत्व पर लागू कर सकते हैं। आपके मामले में यह होगा:

<span hide-empty>{{label}}</span> 

Answer 6

शायद थोड़ा देर हो चुकी है लेकिन आप सीएसएस छद्म वर्ग का उपयोग करने पर भी विचार कर सकते हैं: खाली। तो, यह काम करेंगे (IE9 +)

.trancluded-item:empty { 
    display: none; 
} 

तत्व अभी भी डोम में पंजीकृत किया जाएगा, लेकिन खाली और अदृश्य हो जाएगा।