CODEWITHSUNDEEP
angularjs
Akin Dönmez
Akin Dönmez

Reputation: 363

AngularJS How to add template inside of a HTML div

I have a index page which is divided to 4 divs. What i m trying to do is when the user clicks on a link in the navigation bar, the template is loaded in the div. For example, if the user clicks on the ex1 then the first div in the html supposed to show the content of the template. Any ideas how can i do it ?

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

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

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

    $scope.findRandom = function(){

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

    }]);

Upvotes: 0

Views: 1198

Answers (1)

hally9k
hally9k

Reputation: 2583

Currently your template will populate the <ng-view> view tag when you navigate to '/ext1'. If I understand you correctly you want the template contents to appear inside div1 when '/ext1' is navigated to...

Off the top of my head below code would achieve that by listening for the $routeUpdate event...

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

... add an ng-show to your template...

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

.. and put the directive into the div.

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

It's worth noting that when you want to do any complex routing of panels and nested partial views you should look into using ui.router...

Upvotes: 1

Related Questions