ng-if = 'false' 隐藏了 DIV

Question

我在同一个 div 上有 ng-click 和 ng-if 指令。

由于 click 变量最初设置为 false box DIV 不会出现。如果我将 click 设置为 true 或将 !click 用于 ng-if 指令，则 box DIV 出现但仍然单击时没有动画。

如果我从框 DIV 中删除 ng-click 并将其添加到另一个 DIV 或按钮以进行切换，动画会工作.然而， box DIV 最初仍然隐藏，并且在动画运行.

之后也消失了

HTML

<div ng-app="animationApp" ng-controller="c1">

  <div ng-click="click=!click" ng-if="click" class="box"></div>

</div>

JS

angular.module('animationApp', ['ngAnimate'])

    .controller('c1', function ($scope, $animate, $timeout) {

        $scope.click = false;

})

;

CSS

.box {
  width: 40px;
  height: 40px;
  background-color: indianred;
}

.box.ng-enter {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  transform: rotateZ(0deg);
}

.box.ng-enter-active {
  transform: rotateZ(-180deg);
}

.box.ng-leave {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  transform: rotateZ(-180deg);
}

.box.ng-leave-active {
  transform: rotateZ(0deg);
}

演示 https://jsfiddle.net/ae8kwzxg/93/

Answer 1

这一行什么都不做："ng-click="click=!click"。

之所以不起作用是因为您的 $scope.click 变量是原始类型 (bool)。这意味着在这一行中：ng-click="click=!click" click 变量是 $scope.click 变量的副本，您只需更改副本而不是实际的 $scope.click。如果您将 $scope.click 变量更改为对象，例如 $scope.click = {active:true} 并将您的 HTML 更改为：<div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div> 它会起作用。

但更好的方法是始终在函数中进行赋值：

<div ng-app="animationApp" ng-controller="c1">

  <div ng-click="clicked()" ng-if="click" class="box"></div>

</div>

您的控制器将是：

angular.module('animationApp', ['ngAnimate'])

    .controller('c1', function ($scope, $animate, $timeout) {

        $scope.click = true;

        $scope.clicked = function(){
            $scope.click = !$scope.click;
        }
})

这是工作示例：https://jsfiddle.net/ae8kwzxg/94/

ng-if = 'false' 隐藏了 DIV

ng-if = 'false' is hiding the DIV

angularjs

angularjs-ng-click

angular-ng-if