Question

我有一个索引页面，分为4个div。我想要做的是当用户点击导航栏中的链接时，模板将加载到div中。例如，如果用户点击ex1，那么html中的第一个div应该显示模板的内容。任何想法我该怎么做？

reloadData()

app.js

<body ng-controller="MainController">

<nav class="navbar navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

        <div>
            <ul class="nav navbar-nav">

                <li ng-class="{ active: isActive('#ex1')}"><a href="#ex1">Ex1</a></li>
                <li ng-class="{ active: isActive('#ex2')}"><a href="#ex2">Ex2</a></li>
                <li ng-class="{ active: isActive('#ex3')}"><a href="#ex3">Ex3</a></li>
                <li ng-class="{ active: isActive('#ex4')}"><a href="#ex4">Ex4</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->

<div ng-view>

</div>
<footer ng-include="'partials/footer.html'" style="position: fixed; bottom: 0"></footer>

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers/Ex1Ctrl.js"></script>
<script src="controllers/Ex2Ctrl.js"></script>
<script src="controllers/Ex3Ctrl.js"></script>
<script src="controllers/Ex4Ctrl.js"></script>
<script src="services/ex1Service.js"></script>

<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>

Ex1模板

use strict';

// Declare app level module which depends on views, and components
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {

    $routeProvider.when('/ex1', {
        templateUrl: 'partials/ex1.html',
        controller: 'Ex1Ctrl'
    });
    $routeProvider.when('/ex2', {
        templateUrl: 'partials/ex2.html',
        controller: 'Ex2Ctrl'
    });
    $routeProvider.when('/ex3', {
        templateUrl: 'partials/ex3.html',
        controller: 'Ex3Ctrl'
    });
    $routeProvider.when('/ex4', {
        templateUrl: 'partials/ex4.html',
        controller: 'Ex4Ctrl'
    });
    $routeProvider.otherwise({
       redirectTo : '/'
    });

}]);

app.controller('MainController', ['$scope', function ($scope) {

}]);

Ext1控制器

<div id = "ex1">
<div >click to see your lucky number<button class="btn btn-default" style="margin-left: 5px" ng-click="findRandom()">Click</button></div>
<div>{{random}}</div>
</div>

Answer 1

目前，当您导航到“/ ext1”时，您的模板将填充<ng-view>视图标记。如果我理解正确，那么当'/ ext1'导航到...时，您希望模板内容显示在div1内;

通过聆听$routeUpdate事件...

，我可以在代码下面找到代码

app.directive('luckyNumberGenerator', function(){
    return {
        templateUrl: '/path/to/the/template.html',
        controller: function($scope, $location){
            $scope.$on('$routeUpdate', function(){
                  $scope.showLuckyNumberGenerator = $location.path() === '/ext1';
            });
        }
    }
});

...在模板中添加ng-show ...

<div id = "ex1" ng-show="showLuckyNumberGenerator">
    <div >click to see your lucky number<button class="btn btn-default" style="margin-left: 5px" ng-click="findRandom()">Click</button></div>
     <div>{{random}}</div>
</div>

..并将指令放入div。

<div id="div1">    
    <lucky-number-generator></lucky-number-generator>
</div>

值得注意的是，当您想要进行面板和嵌套部分视图的任何复杂路由时，您应该使用ui.router ...

AngularJS如何在HTML div中添加模板

1 个答案: