После скрытия частей останков div

Question

Мой коллега создал шаблон с угловыми. Он состоит из меню, которое может быть закрыто. Это достигается простым jQuery. Однако после нажатия кнопки закрытия нижняя часть меню-div остается. Если мышь перемещается, она исчезает. Я не могу воспроизвести ошибку в js скрипке. Почему части остаются, как это исправить?

HTML

<div class="menu"> 
    <button class="close"> X close this </button> 
</div> 

CSS

.menu{ 
    width: 100px; 
    height: 200px; 
    padding: 20px; 
    background: lightgrey; 
} 

.hide{ 
    display: none; 
} 

JS

$('body').on('click', '.close', function(){ 
    $(this).closest('.menu').addClass('hide'); 
}); 

/// also does not work 
$('body').on('click', '.close', function(){ 
    $(this).closest('.menu').hide(); 
}); 

Answer 1

Прежде всего вы используете angularjs, и вы не можете использовать JQuery, как на стандартных веб-сайтов. у вас есть этот JS:

$('body').on('click', '.close', function(){ 
    $(this).closest('.menu').addClass('hide'); 
}); 

, но в момент, когда этот скрипт выполняется не HTML оказываемых на страницу, так что этот сценарий является usless.

Для выполнения этой работы вам необходимо создать специальную директиву.

.directive('ngHideCustom', function() { 
    return function (scope, elm, attrs) { 
     $('.close', elm).click(function() { 
      $(this).parent().hide(); 
     }); 
    } 
}) 

и вам нужно изменить HTML, чтобы назвать эту директиву

<div class="menu" ng-hide-custom> 
    <button class="close"> X close this </button> 
</div> 

таким образом ваш сценарий будет применяться только тогда, когда эта часть HTML визуализируется на страницу.