关于javascript：如何使用angular点击菜单上的div内加载html？


How to load html inside a div on menu click using angular?

我不熟悉Angular，我有一个菜单和一个容器，当用户单击菜单项时，我希望视图动态更改。我跟踪了一些样品，但不起作用。这是我的密码，

1.索引2.仪表板.html

HTML：

1
2
3
4
5
6
7
8
 <ul id="side-menu" class="nav">
   
      <li class="active" ng-click="template='dashboard.html'">
           
       <span class="menu-title">Dashboards</span>
       
     
</li>

App.JS:

1
var app = angular.module('Digin',[]);

这里是分区：

1
 
相关讨论

看起来您需要的是添加一个路由机制(视图通常由路由定义，而不是由逻辑条件)Angular的方法是通过路由模块，它可以通过ngroute模块或由Angularui团队使用ui路由器模块来完成。

其思想是定义一个状态并将视图附加到状态，在HTML中添加一个UI视图标记，然后将视图动态地注入其父包装器中：

App.JS

1
2
3
4
5
6
7
8
9
10
11
12
13
var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider          
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboard.html'
        })

});

index.html(请将UI视图标记视为HTML容器)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
   
        AngularUI Router
   
    <ul class="nav navbar-nav">
       
<li>
Dashboard
</li>

   
</ul>

</nav>



   


    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js">

</body>

使用UI路由器扩展角度布线

相关讨论