Angularjs свернуть Navbar должны дважды щелкнуть, чтобы открыть

Question

У меня есть сваливающаяся панель навигации, которая размещается с помощью ng-include на моей странице указателя.По какой-то причине мне нужно дважды щелкнуть, прежде чем можно будет открывать панель навигации.Я использую navbar из w3schools https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown Я использовал именно то, что у них есть, но мне все равно нужно дважды щелкнуть, прежде чем я смогу открыть свернутую панель навигации.(После этого все работает нормально) В консоли также нет ошибок.Это как-то связано с angularjs?

navbar HTML:

      $scope.myFunction = function() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
      }

        .topnav {
          background-color: transparent;
        }

        .topnav a {
          display: inline-block;
          color: black;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 16px;
        }


        .topnav .icon {
          display: none;
        }

        .dropdown {
          float: right;
          padding-top: 5px;
        }

        .hehe {
          float: right;
          padding-top:5px;
        }

         .dropdown .dropbtn {
            font-size: 17px;
            border: none;
            outline: none;
            color: black;
            padding: 14px 16px;
            background-color: inherit;
            font-family: inherit;
            margin: 0;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

         .topnav a:hover, .dropdown:hover .dropbtn {
          background-color: transparent;
          color: skyblue;
        }

         .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }

         .dropdown:hover .dropdown-content {
            display: block;
        }

        @media screen and (max-width: 900px) {
          .topnav a:not(:first-child), .dropdown .dropbtn {
            display: none;
          }
          .topnav a:not(:first-child), .hehe {
            display: none;
          }
         .topnav a.icon {
            float: right;
            display: block;
          }
        }

        @media screen and (max-width: 900px) {
         .topnav.responsive {position: relative;}
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
          }
          .topnav.responsive .dropdown {float: none;}
          .topnav.responsive .hehe {float: none;}
          .topnav.responsive .dropdown-content {position: relative;}
          .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
          }
          .topnav.responsive .hehe {
            display: block;
            width: 100%;
            text-align: left;
          }
        }

 <div class="topnav" id="myTopnav" ng-controller="searchController">
        <div class="hehe">
          <a href="">Developer</a>
          <a href="">Data Enquiry</a>
        </div>
          <div class="dropdown">
            <button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button>
            <div class="dropdown-content" >
              <a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a>
            </div>
          </div>
          <a href="" style="font-size:15px; padding-top:20px;" class="icon" ng-click="myFunction()">&#9776;</a>
        </div>

Answer 1

Хорошо, проблема в том, что ng-scope генерируется angularjs в HTML, и я нашел это решение

myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);

из AngularJS: отключить или удалить ng-scope и ng-bindingиз сгенерированного HTML для удаления ng-scope.И это работает сейчас.

Answer 2

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" ng-click="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Responsive Topnav with Dropdown</h2>
  <p>Resize the browser window to see how it works.</p>
  <p>Hover over the dropdown button to open the dropdown menu.</p>
</div>

JS:

 $scope.myFunction = function() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
  }

В моем коде все работает нормально, навигационная панель открывается после первого нажатия. Plunker: http://plnkr.co/edit/zYys9aGUyuvrlSdVknJx?p=preview