use*_*486 70 javascript twitter-bootstrap angularjs angular-ui-bootstrap angular-strap
我想将AngularJS和Twitter Bootstrap整合到一个全新的Web应用程序中.似乎已经为Bootstrap编写了AngularJS指令.
但是,仔细观察,似乎这些指令并未涵盖所有Bootstrap.我可以将AngularUI Bootstrap代码与原始Bootstrap结合使用以获得完整性吗？它可以在第一时间完成吗？
我偶然发现了另一个名为AngularStrap的 Angular项目.我能把这三个结合起来吗？
将AngularJS和Twitter Bootstrap结合起来以获得完整性的最佳方法是什么？
sch*_*cki 65
通常,Bootstrap的CSS部分与AngularJS的工作方式完全相同,因为它与Bootstrap JavaScript一起使用.因此,只要您只想使用Bootstrap CSS,就不必考虑它.
对于几乎所有的Bootstrap JavaScript功能,AngularUI提供了另一种方法.例如,导航栏通常只使用CSS,所以只需查看Bootstrap文档并实现它.如果您需要导航栏的某些响应功能,您将需要该collapse指令; 例如,请看这里:angular-ui navbar
因此,如果您认为AngularUI中缺少任何内容,您是否可以更具体地说"不够完整以涵盖整个Twitter Bootstrap"？我不认为存在普遍的差距.
此外,http://angular-ui.github.io/bootstrap/是该任务最成熟的库.因此,如果您认为缺少某些功能,我强烈建议您修补它并发出拉取请求.
ABu*_*cin 17
可以通过编写自己的Angular指令来组合代码,这些指令生成具有Bootstrap类的HTML.我正在开发一个结合Bootstrap和Angular的类似Web应用程序.我在那里做了什么,是这样的:
app.directive('trackerMenu', function(){
return {
restrict: 'E',
templateUrl: "partials/menu.html"
};
});
menu.html的内容是:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<li class='toggleable'>
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
该指令使用如下:
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
基本上,我的指令是将Bootstrap 导航栏注入页面.