ng-if =' false'正在隐藏DIV

时间:2017-09-15 14:09:48

标签: angularjs angularjs-ng-click angular-ng-if

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

由于click变量最初设置为false DIV不会显示。如果我将click设置为true或将!click设置为ng-if指令,则会出现 DIV,但点击后仍然没有动画。< / p>

如果我从 DIV中移除ng-click并将其添加到另一个DIV或按钮以进行切换,则动画可以正常工作。但是, 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/

1 个答案:

答案 0 :(得分:2)

此行无效:"ng-click="click=!click"

之所以不起作用是因为您的$scope.click变量是原始类型(bool)。这意味着在这一行中:ng-click="click=!click"点击变量是$scope.click变量的副本,您只需更改副本,而不是实际的$scope.click。如果您要将$scope.click变量更改为object,例如$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/