代码之家 › 专栏 › 技术社区 › user1449456

ng if='false'隐藏DIV

angular-ng-if angularjs-ng-click angularjs

user1449456 · 技术社区 · 8 年前

我有 ng-click ng-if

自 click 变量最初设置为 false 这个 DIV未出现。如果我设置 点击 到 true !click 对于 ng if 盒

如果我删除 ng点击 从…起 DIV并将其添加到另一个DIV或按钮以进行切换,动画工作。然而盒 DIV最初仍然隐藏,并且在动画运行后也会消失。

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

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

</div>

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 回复 | 直到 8 年前

freethinker 8 年前

这行是什么都不做: "ng-click="click=!click" .

不工作的原因是因为你的 $scope.click ng-click="click=!click" click variable是您的 . 如果你改变主意 $范围。点击 $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/