如何使用AngularJS监听DOM元素？

Question

我想监视<div id="please_monitor_me">是否可见。如果它不可见，我想删除边距（margin: 0;）。

我希望它没有余量，因为以后它可以显示一个汉堡按钮。

https://jsfiddle.net/4tusk977/

当显示并点击移动视图活性和汉堡按钮，我想删除的顶部和底部形态的不需要的边缘。

Answer 1

这里使用AngularJS一个小片段。 只需添加你的元素后跟类.hg-hide，并覆盖在这些规则的CSS属性都想要更改将仅应用于当元素会被隐藏的样式：

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', MyCtrl); 
 

 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.isVisible = true; 
 
    $scope.toggleVisibility = function() { 
 
    $scope.isVisible = !$scope.isVisible; 
 
    }; 
 
}

.my-div.ng-hide { 
 
    margin: 0px; 
 
} 
 

 
.my-div { 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <button ng-click="toggleVisibility()"> 
 
    Toggle visibility 
 
    </button> 
 
    <div class="my-div" ng-show="isVisible"> 
 
     MY DIV 
 
    </div> 
 
    <div> 
 
     MY OTHER DIV 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

基本上，安德烈的方法是正确的。完整的代码如下：

.navbar-form { 
    margin-top: 0; 
    margin-bottom: 0; 
} 

@media (min-width: 768px) { 
    .navbar-form { 
     margin-top: 8px; 
     margin-bottom: 8px; 
    } 
} 

更新fiddle