it-swarm.com.ru

Angular - Событие для ng-hide и ng-show

Я хотел бы посмотреть, как спрятаться и показать выражения для всех элементов в моем приложении.

Я знаю, что могу сделать это, обернув директиву show функцией, которая просто возвращает аргумент:

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

Хотя тогда я не мог использовать Google CDN ...

Есть ли лучший способ сделать это?

11
jpillora

Вот что я придумал (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)

Преобразовано в 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));
22
jpillora

Другой способ - это $watch атрибута ngShow - хотя это должно быть сделано в директиве (полезно, если вы показываете/скрываете уже пользовательскую директиву)

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