Как предотвратить запуск анимации при нажатии на другую кнопку, когда div уже виден

Question

Как предотвратить запуск анимации при нажатии на другую кнопку, когда div уже виден

0

Я схожу с ума, потому что не могу понять, где эта логика терпит неудачу.

У меня есть эта директивная логика:

movies.directive('detailsBox', ['$timeout', function($timeout) {

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      var current, 
          previous;

      element.on('click', function() {

        if (!current) {
          current = $(this).data('index');
        }
        else {
          previous = current;
          current = $(this).data('index');
        }

        if (current === previous || previous === undefined) {

          // Add a delay so the images 
          // have a chance to load the first time it runs
          $timeout(function() {
            $('.details-box').slideToggle(function() {
              $('.details-box .toggle').fadeToggle();
            });
          }, 300);
        }

      });

    }
  }
}]);

И три кнопки:

<button data-details-box data-index="1">1</button>
<button data-details-box data-index="2">2</button>
<button data-details-box data-index="3">3</button>

Каждая из этих кнопок переключит div с некоторым контентом:

<div class="details-box">
  <div class="toggle">Some content</div>
</div>

Если я нажму на кнопку nr 1, а затем на кнопке nr 2 или 3, анимация не будет запущена, так как окно с данными уже видно.

Если я нажму на кнопку nr 1 и снова кнопку nr 1, анимация должна запуститься, поэтому закрываем окно с данными.

Проблема в том, что анимация выполняется, когда я нажимаю кнопку nr 1, а затем кнопку nr 2 или 3. Какой она не должна.

Chrillewoodz 16 июль 2015, в 16:55

Источник

Теги:

jquery

angularjs

1 ответ

Ещё вопросы

DWDuck · Accepted Answer · 2015-07-16T13-56-00.000Z

Две проблемы здесь, я думаю. Сначала... директивы не знают о предыдущих и применяют переменные в других директивах. Вам нужно связать их с общей областью.

scope: {
  current: '=current',
  previous: '='
},

И в вашем html...

<button data-details-box data-index="1" current="current" previous="previous">1</button>
<button data-details-box data-index="2" current="current" previous="previous">2</button>
<button data-details-box data-index="3" current="current" previous="previous">3</button>

Во-вторых, я считаю, что вам нужно использовать scope. $ Apply() в вызове element.on.

scope.$apply(scope.previous = scope.current);

Здесь работает плункер, который делает то, что я думаю, что вы хотите. Я не уверен, как вы хотели, чтобы начальные условия...

http://plnkr.co/edit/bu34bNSe6yHXCA9SQEUC?p=preview

Это то, что вы ищете?

Я не могу заставить это работать в моем сценарии, несмотря на наличие точно такого же кода. Я думаю, это потому, что у меня есть кнопки в разных областях, так как я использую ng-repeat для родителя кнопки.
Мне пришлось ввести третью переменную с именем «closed», иначе переключение с постепенным увеличением не будет работать с вашей текущей логикой. И вы были правы, что мне пришлось привязать его к области видимости вместо локальных переменных, поскольку они просто сбрасывались при каждом запуске функции. Не осознавал, пока я не перешагнул через код в консоли. Я приму ваш ответ, так как он руководил мной. Хоп-хоп Cheerios.