javascript - 检查 div 是否隐藏在 AngularJS 中的 Controller 中？

Question

我在 HTML 中使用 Angular 隐藏/显示了一个 div，但我想知道如何检查它当前是否在我的 Controller 中隐藏。

到目前为止我发现的任何解决方案都是基于 jQuery 的，使用“hasClass”来查找 ng-hide，但我不想使用 jQuery。

我的 div 看起来像这样

<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>

我认为从我的 Controller 中我可以只调用 if($scope.showDetails) 并返回 true 或 false，但它是未定义的。

如何检查 div 是否从我的 Controller 隐藏或显示？谢谢

Answer 1

我猜您遇到了范围界定问题。将其传递给将检查它的函数是最好的选择。否则，如果它在范围内， Controller 应该能够访问它。

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>