Prüfen, ob div in AngularJS vom Controller versteckt ist?

Question

Ich habe eine div, die ich mit eckigen in meinem HTML verstecken/zeigen, aber ich möchte wissen, wie zu prüfen, ob es derzeit in meinem Controller versteckt ist oder nicht.

Alle Lösungen, die ich bisher gefunden habe, sind jQuery basierend auf 'hasClass', um ng-hide zu finden, aber ich möchte jQuery nicht verwenden.

Mein div sieht wie folgt aus

<div class="item item-input" ng-show="showDetails"></div> 

<button class="button button-block button-light leftTextButton" 
ng-click="showDetails = ! showDetails; updateTimes()"> 
<i ng-class="{'icon icon ion-minus-round': showDetails, 
'icon icon ion-plus-round': !showDetails}"></i> End Time</button> 

ich von meinem Controller gedacht konnte ich nur anrufen, wenn ($ scope.showDetails) und das wäre wahr oder falsch zurückgeben, aber es ist nicht definiert.

Wie kann ich überprüfen, ob ein div wenn versteckt oder von meinem Controller angezeigt wird? Danke

Answer 1

Ich schätze, Sie haben ein Problem mit dem Scoping. Es an die Funktion zu übergeben, die es prüft, ist die beste Wette. Andernfalls sollte der Controller in der Lage sein, darauf zuzugreifen.

angular.module('MyApp', []) 
 
    .controller('MyController', ['$scope', 
 
    function($scope) { 
 
     $scope.myBoolean = false; 
 

 
     $scope.checkMyBooleanOnScope = function() { 
 
     alert($scope.myBoolean); 
 
     }; 
 

 
     $scope.checkMyOtherBooleanOnScope = function() { 
 
     alert($scope.myOtherBoolean); 
 
     }; 
 

 
     $scope.checkBooleanByPassingIt = function(bool) { 
 
     alert(bool); 
 
     }; 
 
    } 
 
    ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyController"> 
 
    <p>myBoolean predefined in the controller:{{myBoolean}} 
 
    <input type="checkbox" ng-model="myBoolean" /> 
 
    </p> 
 
    <p> 
 
    <button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button> 
 
    <button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button> 
 

 
    </p> 
 
    <p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}} 
 
    <input type="checkbox" ng-model="myOtherBoolean" /> 
 
    </p> 
 
    <p> 
 
    <button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button> 
 
    <button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button> 
 
    </p> 
 

 
</div>