1

如果我在 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>

4

1 回答 1

0

使用 更改其中一个变量$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>

于 2017-09-21T10:07:37.177 回答