AngularJS Как добавить шаблон внутри HTML-div

Question

AngularJS Как добавить шаблон внутри HTML-div

0

У меня есть индексная страница, которая делится на 4 div. То, что я пытаюсь сделать, - это когда пользователь нажимает ссылку на панели навигации, шаблон загружается в div. Например, если пользователь нажимает на ex1, тогда первый div в html должен отображать содержимое шаблона. Любые идеи, как я могу это сделать?

<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>

app.js

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) {

}]);

Шаблон Ex1

<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>

Контроллер Ext1

angular
    .module('app')
    .controller('Ex1Ctrl', ['$scope','Calculator', function ($scope,Calculator) {

    $scope.findRandom = function(){

        $scope.random=Calculator.number();
    }

    }]);

Akin Dönmez 04 окт. 2015, в 13:53

Источник

Теги:

angularjs

1 ответ

Ещё вопросы

hally9k · Answer 1 · 2015-10-04T10-10-00.000Z

В настоящее время ваш шаблон будет заполнять <ng-view> при переходе к '/ext1'. Если я правильно вас понял, вы хотите, чтобы содержимое шаблона отображалось внутри div1 когда "/ext1" перемещается на...

В верхней части моей головы ниже код достигнет этого, прослушивая событие $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...