与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导航栏

回答

相关问题