Как получить вложенный ng-if триггер?

Если у меня есть ng-if внутри ng-if, внутреннее ng-if не будет инициироваться, если условие внешнего ng-if находится в процессе сокрытия.

Я бы хотел, чтобы встроенный ng-if запускался, даже если внешний находится в процессе сокрытия. В этом конкретном случае у меня длинный переход, поэтому все, что происходит в предмете, все еще можно увидеть.

Нажатие на переключатель должно показывать "до свидания", но поскольку внешний div находится в процессе удаления, внутреннее содержимое не обновляется.

https://plnkr.co/edit/0MT62ZNJ8rsLtnhhryfk?p=preview

var app = angular.module('App', ['ngAnimate']);

app.controller('HomeController', ['$scope', function(scope) {
  scope.data = {
    show: true,
    show2: true,
  };
  scope.toggle = function() {
    scope.data.show = !scope.data.show;
    scope.data.show2 = !scope.data.show2;
  };
}]);
div {
  padding: 20px;
  border: 1px solid black;
}

.out {
  transition: 4s;
}

.out.ng-leave {
  background: red;
}

.out.ng-leave-active {
  background: purple;
}

.out.ng-enter {
  background: yellow;
}

.out.ng-enter-active {
  background: green;
}

.as-console {
display: none !important;
}
<!doctype html>
<html ng-app="App">

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.min.js"></script>

</head>

<body ng-controller="HomeController">

  <div class="out" ng-if="data.show" ng-animate-children>
    <div class="inA" ng-if="data.show">
      HELLO
    </div>
    <div class="inB" ng-if="!data.show">
      GOODBYE
    </div>
  </div>

  <div ng-click="toggle()">toggle</div>

</body>

</html>

Источник

1 ответ

Измените одну из переменных, используя $timeoutтак что контент будет обновляться раньше родительскогоdivЭлемент запускает анимацию:

var app = angular.module('App', ['ngAnimate']);

app.controller('HomeController', ['$scope', '$timeout', function(scope, $timeout) {
  scope.data = {
    show: true,
    show2: true,
  };
  scope.toggle = function() {
    $timeout(function(){  scope.data.show = !scope.data.show; });
    scope.data.show2 = !scope.data.show2;
  };
}]);
div {
  padding: 20px;
  border: 1px solid black;
}

.out {
  transition: 4s;
}

.out.ng-leave {
  background: red;
}

.out.ng-leave-active {
  background: purple;
}

.out.ng-enter {
  background: yellow;
}

.out.ng-enter-active {
  background: green;
}

.as-console {
  display: none !important;
}
<!doctype html>
<html ng-app="App">

<head>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-animate.min.js"></script>

</head>

<body ng-controller="HomeController">

  <div class="out" ng-if="data.show" ng-animate-children>
    <div class="inA" ng-if="data.show2">
      HELLO
    </div>
    <div class="inB" ng-if="!data.show2">
      GOODBYE
    </div>
  </div>

  <div ng-click="toggle()">toggle</div>

</body>

</html>

Источник
Другие вопросы по тегам