與angularjs Bootstrap導航欄

我想獲得與angularjs工作的bootstrap導航欄。我希望在index.html中有navbar，在navbar中的每個選項卡的其餘內容都在它自己的部分中。我無法使部分顯示出來。與angularjs Bootstrap導航欄

http://plnkr.co/edit/sKJU4nrNYV56uJQG4Lvw?p=preview

來源

2013-07-28 lostintranslation

有幾個你的代碼的問題。請將我的修復與您的版本進行比較。（Plnkr）

您應該使用config（）註冊路由規則。
你需要把ng-view在HTML頁面中，並確保它是NavCtrl
控制器名稱在路由規則的範圍內應該是一個字符串。你錯過了報價。
你應該使用ng-click來觸發加載頁面而不是href。請記住，路由在Angularjs的作用域中不是html。

來源

2013-07-28 18:09:34 zsong

對於具有洞察力的「請記住，路由在Angularjs的範圍不是html」。 –

有一種方法嗎？我怎麼做$ routeProvider？ – oshliaer

我強烈建議您從純引導切換到AngularJS兼容 bootstrap。

例如 - http://mgcrea.github.io/angular-strap/#/navbar

來源

2013-07-28 19:08:16

長久以來一致認爲這看起來很棒。我仍然在學習角度，所以我自己先做一些事情，所以我理解這個框架對我很重要。 – lostintranslation

在這種情況下，請勿使用引導程序。如果你使用常規版本，Bootstrap和Angular並不總是很好玩，而且大多數引導程序可以做的事情已經可以在Angular中完成了。這並不是說當然不應該使用Bootrap與Angular，但是如果你想學習，你應該學會在引入Bootstrap之前以Angular的方式做事。 –

好點。我在尋找自己的解決方案時遇到了這個問題，但想使用[angular-ui-router]（https://github.com/angular-ui/ui-router）。 FWIW，我創建了一個使用angular-ui-router的基本指令，而不是其他任何東西來控制您的引導路徑：[cr-bootstrap-navbar]（https://github.com/coderigo/cr-bootstrap-navbar ） – coderigo

我知道這個職位是有點老了，但可能是能幫助別人 navbar menu

它是在AngularJS，自舉實現了幾個下拉菜單的導航欄CSS和angular-ui。下拉菜單是通過自定義指令中的遞歸調用創建的。

中的index.html：

<body> 
    <h1>Hello Navbar</h1> 
    <div ng-app="my-app"> 
    <div ng-controller="treeController"> 
     <nav class="navbar navbar-default" role="navigation"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
      <span>Brand</span> 
      </a> 
     </div> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
      <a href="#" class="dropdown-toggle" dropdown-toggle role="button"> 
       Dropdown 
       <span class='caret'></span> 
      </a> 
      <tree tree='tree'></tree> 
      </li> 
      <li class="dropdown" dropdown on-toggle="toggled(open)"> 
      <a href="#" class="dropdown-toggle" dropdown-toggle role="button"> 
       Just a clone 
       <span class='caret'></span> 
      </a> 
      <tree tree='tree'></tree> 
      </li> 
     </ul> 
     </nav> 
    </div> 
    </div> 
</body>

的的script.js：

var app = angular.module('my-app', ['ui.bootstrap']); 

app.controller('treeController', function($scope) { 
    $scope.callMe = function() { 
    alert("test"); 
    }; 

    $scope.tree = [{ 
    name: "Bob", 
    link: "#", 
    subtree: [{ 
     name: "Ann", 
     link: "#" 
    }] 
    }, { 
    name: "Jon", 
    link: "#", 
    subtree: [{ 
     name: "Mary", 
     link: "#" 
    }] 
    }, { 
    name: "divider", 
    link: "#" 
    }, { 
    name: "Another person", 
    link: "#" 
    }, { 
    name: "divider", 
    link: "#" 
    },{ 
    name: "Again another person", 
    link: "#" 
    }]; 

}); 

app.directive('tree', function() { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: { 
     tree: '=' 
    }, 
    templateUrl: 'template-ul.html' 
    }; 
}); 

app.directive('leaf', function($compile) { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: { 
     leaf: "=" 
    }, 
    templateUrl: 'template-li.html', 
    link: function(scope, element, attrs) { 
     if (angular.isArray(scope.leaf.subtree)) { 
     element.append("<tree tree='leaf.subtree'></tree>"); 
     element.addClass('dropdown-submenu'); 
     $compile(element.contents())(scope); 
     } else { 
     element.bind('click', function() { 
      alert("You have clicked on " + scope.leaf.name); 
     }); 

     } 
    } 
    }; 
});

最後兩個模板：

<ul class='dropdown-menu'> 
    <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf> 
</ul> 

<li ng-class="{divider: leaf.name == 'divider'}"> 
    <a ng-if="leaf.name != 'divider'">{{leaf.name}}</a> 
</li>

我希望它有幫助。

來源

2015-03-03 21:16:48

與angularjs Bootstrap導航欄

回答

相關問題