如何使用Angular在菜單單擊上的div內加載HTML？

Question

我是新手，我有一個菜單和一個容器，當用戶單擊菜單項時，我希望視圖動態更改。 我已經跟蹤了一些示例，但是沒有用。 這是我的代碼，

1.Index.html 2.Dashboard.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：

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

這是div：

<div class="page-content" ng-include src="template">
</div>

Answer 1

看起來您需要的是添加路由機制（視圖通常是由路由而不是邏輯條件定義的）Angular使其干凈的方法是通過路由模塊，可以通過ngRoute模塊或ui-router模塊來完成由AngularUI團隊提供。

這個想法是定義一個狀態並將視圖附加到狀態，在html中添加一個ui-view標簽，然后該視圖會動態注入到其父包裝中：

app.js

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-view標記視為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>

擴展使用UI路由器的角度路由

如何使用Angular在菜單單擊上的div內加載HTML？

問題描述

1 個解決方案

解決方案1
2 已采納 2014-12-14 11:45:25

app.js

index.html（請將ui-view標記視為html容器）

如何使用Angular在菜單單擊上的div內加載HTML？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-12-14 11:45:25

app.js

index.html（請將ui-view標記視為html容器）

解決方案1
2 已采納 2014-12-14 11:45:25