Angular - Evento per ng-hide e ng-show

Question

Mi piacerebbe vedere la mia pelle e mostrare le espressioni su tutti gli elementi nella mia app.

so che posso farlo avvolgendo la direttiva spettacolo con una funzione che restituisce solo l'argomento:

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

Tuttavia, mi piacerebbe vedere tutti Nascondi/mostra in tutti gli ingressi nella mia app e quanto sopra non è abbastanza buono.

Potrei anche sovraccaricare le direttive ngShow/ngHide anche se avrei bisogno di rivalutare l'espressione.

Potrei anche solo modificare il sorgente dal momento che è abbastanza semplice:

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

Anche se poi non ho potuto utilizzare Google CDN ...

C'è un bello modo chiunque può pensare di Fai questo ?

Answer 1

Ecco cosa mi è venuta in mente (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) 

Convertito in JavaScript:

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

Un altro modo di approccio è quello di $watch l'attributo di ngShow - anche se questo avrebbe bisogno di essere fatto all'interno di una direttiva (utile se stai mostrando/nascondi una direttiva già personalizzata)

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