Home Ask Login Register

Developers Planet

Your answer is one click away!

Ramya Selvaraj February 2016

How to call directive from template html in angularjs


<script type="text/ng-template" id="ProfileTemplateHTML" >
    <div class="container profilepopup-cont" align="center">
        <div class="row">
            <div class="col-sm-3 zero-margin-padding" align="center">
                <img id="DisplayImage" ng-src={{model.picLarge}} class="img-circle">

In this html template file i have to call a directive.My directive name is 'help'.But if i add to call the directive it is not working. how to call a directive inside html template in angularjs?


MegaRacer February 2016

You can add the directive in these ways

  1. As an attribute

<div help>

  1. As a separate tag

  //your code

aifarfa February 2016

I'm not sure i fully understand the question. here is a jsfiddle to demonstrate how to use custom directive inside ng-template.

or try this..

angular.module('demo', [])
  .directive('help', function() {
    return {
      template: '<div>Help! {{info}}</div>',
      scope: {
        info: '@info'
  .controller('MainCtrl', ['$log',
    function($log) {
      this.hello = 'This is MainCtrl';
      this.template = 'profile-template.html';

      $log.debug('DemoCtrl has been loaded');
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demo">
  <script type="text/ng-template" id="profile-template.html">
    <div>this is profile-template.html</div>
    <div help info="this is directive info."></div>
  <div ng-controller="MainCtrl as main">
    <h2>just a demo</h2>
    <div>{{main.hello}}, include template from {{main.template}}</div>
    <div ng-include src="main.template"></div>


Post Status

Asked in February 2016
Viewed 2,487 times
Voted 10
Answered 2 times


Leave an answer

Quote of the day: live life