如果我在 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>最佳答案
使用 $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>关于javascript - 如何获得嵌套的 ng-if 触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46340407/