如何使用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