Angular UI, Bootstrap Navbar Collapse 및 Javascript

Angular UI, Bootstrap Navbar Collapse 및 Javascript

UI-Router에는 여러 가지 문제가 있습니다.나는 그것이 다른 프레임워크와 어떻게 상호작용하는지 이해할 수 없다.

즉, Bootstrap 3의 navbar collapse 모듈을 구현하려고 합니다(아래 참조).

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name test</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

이것은 Bootstrap 웹사이트에서 직접 가져온 것으로, .html 페이지 내에서 정상적으로 동작합니다.

UI-Router 보기에 삽입할 때 문제가 발생합니다.접히는 동작은 더 이상 작동하지 않습니다.데이터 타깃 함수가 대상을 찾을 수 없기 때문일 것입니다.

Angular UI에서 Bootstrap 3을 사용하는 방법은 무엇입니까?Angular UI 부트스트랩 패키지에는 네비게이션바 모듈이 없습니다.

아래 답변이 좋습니다.다음은 Angular가 있는 참조 URL Twitter Bootstrap Navbar입니다.JS - 접기가 작동하지 않습니다.

bootstrap native js 속성을 ui-bootstrap 디렉티브로 대체해야 합니다(참고).ng-click그리고.collapse):

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <!-- your branding here -->
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" collapse="navbarCollapsed">
      <!-- your normal collapsable content here -->
    </div>
</nav>

컨트롤러의 초기값을 설정합니다.

$scope.navbarCollapsed = true;

편집:

새로운 버전의 ui-bootstrap 접두사는 모든 구성 요소입니다.그에 따라 코드를 조정합니다. collapse->uib-collapse.

나의 특별한 이슈는 범위를 중심으로 돌았다.사용하고 있다ng-repeat내 메뉴 항목을 루핑할 수배할 수 있도록navbarCollapsed에서는 액세스 할 수 없었습니다.ng-repeat자 스코프

해결 방법은 상위 스코프의 변수에 액세스하는 것이었습니다.심플:

ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"

같은 문제를 안고 있는 사람에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/23834507/angular-ui-bootstrap-navbar-collapse-and-javascript