ng-if = 'false'がDIVを隠しています

Question

ng-clickとng-ifのディレクティブが同じdivにあります。

click変数は最初にfalseに設定されているため、ボックス DIVは表示されません。 clickをtrueに設定するか、ng-ifディレクティブに!clickを使用すると、ボックス 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/

Answer 1

この行は何もしないです："ng-click="click=!click"。

あなたの$scope.click変数がプリミティブ型（bool）なので、なぜ機能しないのでしょうか。これは、この行にあることを意味します：ng-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> に変更します。

しかし、より良い方法は、常に機能で割り当てを行うされています

​​

そして、あなたのコントローラは次のようになります。

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/