कोणीय - एनजी-छिपाने और एनजी-शो

Question

के लिए ईवेंट मैं अपने ऐप में सभी तत्वों पर अपना छुपा देखना और अभिव्यक्ति दिखाना चाहता हूं।

मैं जानता हूँ कि मैं एक समारोह जो सिर्फ तर्क देता है के साथ इस शो के निर्देश लपेटकर द्वारा यह कर सकते हैं:

<div ng-show="catchShow(myShowExpr == 42)"></div> 

हालांकि, मैं देखना चाहते हैं उन्हें सब छिपाने/पता चलता भर में मेरे एप्लिकेशन में सभी इनपुट और उपरोक्त पर्याप्त अच्छा नहीं है।

मैं ngShow/ngHide निर्देशों को भी अधिभारित कर सकता हूं हालांकि मुझे अभिव्यक्ति का पुनर्मूल्यांकन करने की आवश्यकता होगी।

मैं भी बस के बाद से यह काफी सरल है स्रोत को संशोधित कर सकते हैं:

var ngShowDirective = ['$animator', function($animator) { 
    return function(scope, element, attr) { 
    var animate = $animator(scope, attr); 
    scope.$watch(attr.ngShow, function ngShowWatchAction(value) { 
     var fn = toBoolean(value) ? 'show' : 'hide'; 
     animate[fn](element); 
     //I could add this: 
     element.trigger(fn); 
    }); 
    }; 
}]; 

हालांकि तो मैं गूगल CDN का उपयोग नहीं कर सकता है ...

वहाँ एक अच्छा तरीका है किसी को भी के बारे में सोच सकता है यह करो ?

Answer 1

यहाँ है कि मैं क्या (CoffeeScript)

getDirective = (isHide) -> 
    ['$animator', ($animator) -> 
    (scope, element, attr) -> 
     animate = $animator(scope, attr) 
     last = null 
     scope.$watch attr.oaShow, (value) -> 
     value = not value if isHide 
     action = if value then "show" else "hide" 
     if action isnt last 
      scope.$emit 'elementVisibility', { element, action } 
      animate[action] element 
     last = action 
    ] 

App.directive 'oaShow', getDirective(false) 
App.directive 'oaHide', getDirective(true) 

परिवर्तित जावास्क्रिप्ट को ले कर आए हैं:

var getDirective = function(isHide) { 

    return ['$animator', function($animator) { 
    //linker function 
    return function(scope, element, attr) { 

     var animate, last; 
     animate = $animator(scope, attr); 
     last = null; 

     return scope.$watch(attr.oaShow, function(value) { 
     var action; 
     if (isHide) 
      value = !value; 

     action = value ? "show" : "hide"; 

     if (action !== last) { 
      scope.$emit('elementVisibility', { 
      element: element, 
      action: action 
      }); 
      animate[action](element); 
     } 

     return last = action; 
     }); 
    }; 
    }]; 
}; 

App.directive('oaShow', getDirective(false)); 
App.directive('oaHide', getDirective(true)); 

Answer 2

एक और तरीका है दृष्टिकोण ngShow की विशेषता $watch है - हालांकि यह करने की आवश्यकता होगी निर्देश के तहत किया जाना चाहिए (उपयोगी यदि आप पहले से ही कस्टम निर्देश दिखा रहे हैं/छुपा रहे हैं)

scope.$watch attrs.ngShow, (shown) -> 
    if shown 
    # Do something if we're displaying 
    else 
    # Do something else if we're hiding