[英]How to check element visibility in expression?
我有兩個div。 我只想顯示someExpression（使用FirstController范圍）為true的第一個。 第二個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是否可見？
我將建議使用服務在控制器之間共享數據，即：
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>
您是否嘗試過使用jQuery
angular.element('#first').hasClass('ng-hide')
由於第一個元素的可見性由您（ someExpression ）控制，因此第二個元素可以是：
<div ng-class="{'col-md-8': someExpression, 'col-md-12': !someExpression}"
ng-controller='SecondController'></div>
即，您使用someExpression和!someExpression來控制要應用的類。 請注意類名周圍的引號。
我假設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');
}
您可以使用指令來執行此操作，但是很難通過編程來使用兩個不同的控制器。
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>
如何獨立於父可見性（jQuery與否）檢查元素可見性
[英]How to check element visibility independent of parent visibility (jQuery or not)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.