Блог

Главная - Вопросы по программированию - Скрытие Div без дублирования кода

Скрытие Div без дублирования кода

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

У меня есть всплывающее меню в div.

Я контролирую открытие и закрытие div с помощью: ng-click="showNavMenu = !showNavMenu" .

Однако для каждой ссылки, где я использую это, мне нужно дублировать этот код, чтобы меню действительно закрывалось после загрузки нового представления.

Я бы хотел избежать этого дублирования кода — есть идеи о том, что я могу сделать:

 <div class="navMenu" ng-show="showNavMenu">
      <ul>
        <li><a href="/about" ng-click="showNavMenu = !showNavMenu">About</a></li>
        <li><a href="/privacy" ng-click="showNavMenu = !showNavMenu">Privacy</a></li>
        <li><a href="/contact" ng-click="showNavMenu = !showNavMenu">Contact Us</a></li>
      </ul>
</div>

Ответ №1:

Вместо этого используйте функцию <li><a href="/about" ng-click="toggleMenu()">About</a></li>

И определите эту функцию в контроллере

 $scope.toggleMenu = function() {
    $scope.showNavMenu = !$scope.showNavMenu;
}

Комментарии:

1. Но я полагаю, мне все равно нужно было бы упомянуть, что в каждом ng-click

2. Иногда код получается более подробным, чем хотелось бы. Использование таких инструментов, как bootstrap, упрощает это вместо того, чтобы возиться с низкоуровневым кодом, подобным этому

3. Да, но вам нужно определить обратный вызов только один раз и изменить это поведение также только один раз, когда требования изменятся. Как насчет того, чтобы использовать ‘ng-repeat’, чтобы отображать все ‘li’ аналогичными способами, только со ссылками в href?

Ответ №2:

Как насчет того, чтобы поместить ng-click на родительский ul ? Я не очень хорошо разбираюсь в правилах обработки / распространения событий angular — возможно, вам нужно внести некоторые изменения в вашу функцию или атрибут ng-click. Или это может просто сработать.

 function toggleMenu() {
   $scope.showNavMenu = !$scope.showNavMenu
}

-----

<ul ng-click="toggleMenu()">

Ответ №3:

Я бы предпочел перенести логику навигации в код контроллера, мне кажется, это самое чистое решение. Таким образом, ваша разметка будет выглядеть как:

 <div class="navMenu" ng-show="showNavMenu">
  <ul>
    <li><a href ng-click="navigate('about')">About</a></li>
    <li><a href ng-click="navigate('privacy')">Privacy</a></li>
    <li><a href ng-click="navigate('contact')">Contact Us</a></li>
  </ul>
</div>

И внутри вашего контроллера:

 $scope.navigate = function(path) {
  $scope.showNavMenu = false;
  window.location.href = '/'   path; //better navigate via router
}