[英]How to load html inside a div on menu click using angular?
I am new to angular, i have a menu and a container, when the user click the menu item i want the view to change dynamically. 我是新手,我有一个菜单和一个容器,当用户单击菜单项时,我希望视图动态更改。 I have followed some samples but din't work.
我已经跟踪了一些示例,但是没有用。 Here is my code,
这是我的代码,
1.Index.html 2.Dashboard.html 1.Index.html 2.Dashboard.html
HTML: HTML:
<ul id="side-menu" class="nav">
<div class="clearfix"></div>
<li class="active" ng-click="template='dashboard.html'"><a href="">
<div class="icon-bg bg-orange"></div>
<span class="menu-title">Dashboards</span>
</a>
</li>
app.js: app.js:
var app = angular.module('Digin',[]);
Here is the div: 这是div:
<div class="page-content" ng-include src="template">
</div>
Looks like what you need is to add a routing mechanism (views are usually defined by route and not by a logical condition) Angular's way to make it clean is via routing module, it can be done with the ngRoute module or with ui-router module by the AngularUI team. 看起来您需要的是添加路由机制(视图通常是由路由而不是逻辑条件定义的)Angular使其干净的方法是通过路由模块,可以通过ngRoute模块或ui-router模块来完成由AngularUI团队提供。
The idea is to define a state and attache a view to state, add a ui-view tag in your html and the view is dynamically injected into its parent wrapper: 这个想法是定义一个状态并将视图附加到状态,在html中添加一个ui-view标签,然后该视图会动态注入到其父包装中:
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'dashboard.html'
})
});
<body ng-app="routerApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="dashboard">Dashboard</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
</body>
To extend angular-routing-using-ui-router 扩展使用UI路由器的角度路由
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.