Question

我有两个div。如果someExpression（使用FirstController范围）为true，我只想显示第一个。第二个div应该根据是否显示第一个div来调整和设置一个类。第一个div：

<div class="col-md-4" ng-show='someExpression' ng-controller='FirstController' id='first'></div>

第二个div：

<div ng-class="document.getElementById('first').style == 'none' ? 'col-md-8' : 'col-md-12'" ng-controller='SecondController'></div>

我宁愿使用比上面更有棱角的方式（我还没有工作）。那么 - 有没有办法检测第一个div是否可见？

Answer 1

我建议使用服务在控制器之间共享数据，即：

<强> JS

var app = angular.module('app', []);
app.service('shared', function() {

  var visisble = true;

  return {
    visisble: visisble
  };

});

app.controller('FirstController', function($scope, shared) {
  $scope.someExpression = shared;
});


app.controller('SecondController', function($scope, shared) {
  $scope.someExpression = shared;

  $scope.update = function() {
    shared.visisble = !shared.visisble;


  }
});

<强> HTML：

<body ng-app="app">
  <div class="row">
    <div id="first" ng-controller="FirstController" class="col-xs-4" ng-show="someExpression.visisble">
      <div>expresion {{someExpression.visisble}}</div>
    </div>
    <div ng-controller="SecondController" ng-class=" someExpression.visisble ?'col-xs-8' :'col-xs-12'">
      <button ng-click="update()">show/hide</button>expresion {{someExpression.visisble}}</div>

  </div>

</body>

Answer 2

您是否尝试过使用jQuery

angular.element('#first').hasClass('ng-hide')

Answer 3

由于第一个元素的可见性由您（someExpression）控制，因此第二个元素的可见性可能是：

<div ng-class="{'col-md-8': someExpression, 'col-md-12': !someExpression}"
    ng-controller='SecondController'></div>

即。您使用someExpression和!someExpression来控制应用哪些类。请注意类名称旁边的引号。

Answer 4

我假设someExpression绑定到FirstController（如果没有，那么只需在ng-class中使用相同的表达式）...

在HTML上：

ng-class="isVisible('first') ? 'red' : 'blue'"

在 SecondController ：

上

$scope.isVisible = function(el) {
  return angular.element(document.getElementById(el)).hasClass('ng-hide');
}

Plunker

Answer 5

您可以使用指令执行此操作，但很难以编程方式使用两个不同的控制器。

http://jsfiddle.net/f4epLhww/

AngularJS

var app = angular.module('divsApp', []);

app.controller('FirstCtrl', function ($scope, $rootScope) {
    $scope.visible = true;
});

app.controller('SecondCtrl', function ($scope, $rootScope) {

});

app.directive('visible', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.visible) {
                $('#second-div').show();
            }
        }
    }
});

HTML

<div ng-app="divsApp">
    <div ng-controller="FirstCtrl">
        <div ng-show="visible" visible>First Div</div>
    </div>
    <div ng-controller="SecondCtrl" style="display:none;" id="second-div">Second Div</div>
</div>

如何检查表达式中的元素可见性？

5 个答案: