Thanh điều hướng thả xuống đáp ứng với khởi động angle-ui (được thực hiện theo đúng loại góc)

Question 1

Tôi đã tạo JSFiddle với thanh điều hướng thả xuống bằng cách sử dụng mô-đun của angle-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

Theo như tôi hiểu thì đây là cách thích hợp, góc cạnh để triển khai menu thả xuống như vậy. Cách "sai", về góc độ, là bao gồm bootstrap.js và sử dụng "data-toggle =" dropdown "... Tôi có đúng ở đây không?

Bây giờ tôi muốn thêm hành vi đáp ứng vào thanh điều hướng của mình như được thực hiện trong Fiddle sau: http://jsfiddle.net/ghtC9/6/

NHƯNG, có điều tôi không thích ở giải pháp trên. Anh chàng đã bao gồm bootstrap.js!

Vậy đâu sẽ là cách góc cạnh chính xác để thêm hành vi đáp ứng vào thanh điều hướng hiện có của tôi?

Rõ ràng là tôi cần sử dụng các lớp điều hướng đáp ứng bootstraps, chẳng hạn như "nav-sập thu gọn navbar-đáp ứng-thu gọn". Nhưng tôi không biết làm thế nào ...

Tôi thực sự đánh giá cao sự giúp đỡ của bạn!

Cảm ơn bạn trước! Michael

Question 2

Bạn có thể làm điều đó bằng cách sử dụng chỉ thị "thu gọn": http://jsfiddle.net/iscrow/Es4L3/ (kiểm tra hai "Lưu ý" trong HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

Nghĩa là, bạn cần lưu trữ trạng thái thu gọn trong một biến và thay đổi trạng thái thu gọn cũng bằng cách (đơn giản) thay đổi giá trị của biến đó.

Bản phát hành 0.14 đã thêm uib-tiền tố vào các thành phần:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Thay đổi: collapsethành uib-collapse.

Question 3

Cập nhật 2015-06

Dựa trên nhận xét / ví dụ của antoinepairet :

Sử dụng uib-collapsethuộc tính cung cấp hình ảnh động: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <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="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

Cổ xưa..

Tôi thấy rằng câu hỏi được đóng khung xung quanh BS2, nhưng tôi nghĩ rằng tôi sẽ đưa ra giải pháp cho Bootstrap 3 bằng giải pháp ng-class dựa trên các đề xuất trong ui.bootstrap issue 394 :

Biến thể duy nhất từ ví dụ bootstrap chính thức là việc bổ sung các ng-thuộc tính được ghi nhận bởi các nhận xét, bên dưới:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <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="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

Đây là ví dụ làm việc được cập nhật: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (hat tip Lars)

Điều này có vẻ hiệu quả với tôi trong các trường hợp sử dụng đơn giản, nhưng bạn sẽ lưu ý trong ví dụ rằng menu thả xuống thứ hai bị cắt… chúc may mắn!

Question 4

Không chắc liệu có ai đang gặp phải vấn đề phản hồi tương tự hay không, nhưng đó chỉ là một giải pháp css đơn giản cho tôi.

cùng một ví dụ

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

với

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

Question 5

Sự độc diễn của tôi cho thanh điều hướng đáp ứng / thả xuống với angle-ui bootstrap (khi cập nhật lên angle 1.5 và ui-bootrap 1.2.1)
index.html

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}