Angular dynamic element with template and controller

Question

I can't understand how to add dynamic content after click on to my HTML with a template file and some controller.

I want to something like:

element.click(function(){
  element2.html(templateUrl, controller);
});

Angular 1.5.8

Answer 1

Although the question is not to clear I feel what you want to do is to render an html dynamically. There are two solutions for this:

1. angular-routing: This is mostly used if you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module. The content for this is pretty readily available everywhere. You can have a look at them.

2. custom-directive: You can try to write a directive which would render the html on whichever event you want:

   .directive("customTemplateLoad", function($http, $templateCache, $compile) {
   return {
     restrict: 'A',
     link: function(scope, element, attr, controller){
       var template;
       // Some logic to get template, perhaps pass it in the directive itself
       var templatePath = '/templates/'+template;
       $http.get(templatePath, { cache: $templateCache }).success(function(response) {
         var contents = element.html(response).contents();
         $compile(contents)(scope);
       });
     }
   };})
   

Answer 2

you could create a directive with a controller and template, compile it and than add it to the DOM.