Angular JS - Load a template html from directive on click of a button

Question

I am trying to load a HTML template when a link is clicked. I have made a directive that contains templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in index.html. whatever i have done so far is shown below, but it doesn't work.

index.html

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example12-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
  <a href="#" ng-click="showdiv()">show</a>
  <div id="d"></div>
</div>
</body>
</html>

script.js

(function(angular) {
  'use strict';
angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', function($scope) {

    $scope.showdiv = function(){
      $("#d").append("<div my-Customer></div>");
    };
  }])
  .directive('myCustomer', function() {
    return {
      templateUrl: 'my-customer.html'
    };
  });
})(window.angular);

my-customer.html

<p>DIV CONTENT</p>

Here is the link i was testing this code here

does myCustomer directive meant for loading templateUrl? — Pankaj Parkar
– Pankaj Parkar, Commented Jun 21, 2015 at 17:47

Kalhan · Accepted Answer · 2015-06-21 17:54:16Z

37

This is because the angular doesn't bind the directives if you append content like this,

you need to $compile service to do this and this will bind the directives against your $scope

so controller like,

.controller('Controller', ['$scope', '$compile', function($scope, $compile)     {

    $scope.showdiv = function(){
      var compiledeHTML = $compile("<div my-Customer></div>")($scope);
      $("#d").append(compiledeHTML);
    };

}])

here is the DEMO

OR good to do like this,

use ng-if to create or removing element from html,

try this code

Controller,

....
$scope.anableCustomerDirective = false;
$scope.showdiv = function(){
  $scope.anableCustomerDirective = true;
};

HTML

<body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
      <a href="#" ng-click="showdiv()">show</a>
      <div id="d">
          <div my-Customer ng-if='anableCustomerDirective'></div>
      </div>
 </div>
</body>

Suggestion

if your main intention is to place a html content after the click, then you can use ng-include here and it will much cleaner and no need of a another directive.

<div id="d">        
    <div ng-include="templateURL"></div>
 </div>

 $scope.showdiv = function(){
      $scope.templateURL = 'my-customer.html';
 };

find the DEMO

edited Jun 21, 2015 at 17:54

answered Jun 21, 2015 at 17:42

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj Parkar Over a year ago

Its like I asked and you made the changes in your code..Cool answer..Which is explaining all the possibility with what is wrong and which is right :p +1 from me dude. Cheers :)

Prasanna Over a year ago

This is working very nice, but what if I created a form dynamically and want to bind values with different variables?? How to get the index to dynamically added form?

Pankaj Parkar · Accepted Answer · 2015-06-21 17:55:03Z

8

Seems like directive is only meant to load template from it.I'd suggest you to use ng-include directive then

Markup

<a href="#" ng-click="showDiv=true">show</a>
<div id="d"></div>
<div ng-include="showDiv ? 'my-customer.html': ''">

answered Jun 21, 2015 at 17:55

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Vikram Singh Jadon Over a year ago

and also i am one of the two people who upvoted your answer...thnks :D

Pankaj Parkar Over a year ago

@VikramSinghJadon That's why I asked you in comment..Glad to help you..Thanks for appreciation :)

Community · Accepted Answer · 2017-05-23 12:02:46Z

1

The most common way is to use $compile. More info: Dynamically add directive in AngularJS

Then your controller may look like this:

angular.module('docsTemplateUrlDirective', [])
  .controller('Controller', ['$scope', '$compile', function($scope, $compile) {

    $scope.showdiv = function(){
        var el = $compile( "<div my-customer></div>" )( $scope );
        $('#d').append( el );
    };
  }]);

Note that the directive invokation should look like this: <div my-customer>, not <div my-Customer></div> as you have in your code.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Jun 21, 2015 at 17:49

Thomas Weglinski

1,0941 gold badge10 silver badges22 bronze badges

2 Comments

Thomas Weglinski Over a year ago

@pankajparkar Thanks for the tip, but I have just answered the question what was wrong in Vikram code.

Pankaj Parkar Over a year ago

you should have answer in correct way of doing it..not to get OP going in wrong way..that can lead him to may got in different issue ..Though I didn't downvoted :p

Jony-Y · Accepted Answer · 2015-06-21 17:42:55Z

0

when you do it manually with append you actually do not run $apply or $digest so the directive is not run, can you try to do it with ng-show or ng-if ... e.g

  <body ng-app="docsTemplateUrlDirective">
  <div ng-controller="Controller">
  <a href="#" ng-click="showdiv = true">show</a>
   <div my-customer ng-if="showdiv"></div>
  <div id="d"></div>
</div>
</body>

this way angular runs the $apply and the directive will be rendered.

answered Jun 21, 2015 at 17:42

Jony-Y

1,5791 gold badge13 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular JS - Load a template html from directive on click of a button

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related