AngularJS How to dynamically add HTML and bind to controller

Question

I m just getting started with angularJS and struggling to figure out proper architecture for what I m trying to do   I have a single page app but the URL always should stay the same  I don t want the user to be able to navigate to any routes beyond the root   In my app  there is one main div that will need to host different views   When a new view is accessed  I want it to take over the display in the main div   Views loaded in this way can be throw-away or stick around as hidden in the DOM - I m interested in seeing how each might work   I ve come up with a rough working example of what I m trying to do   See working example here in this Plunk   Basically I want to dynamically load HTML into the DOM and have standard angularJS controllers be able to hook into that new HTML   Is there a better simpler way to do this than by using the custom directive I have here and using  compile   to hook up to angular   Perhaps there s something sort of like the router  but doesn t require URL has changes to operate   Here s the special directive I m using so far  taken from another SO post       Stolen from  http   stackoverflow com questions 18157305 angularjs-compiling-dynamic-html-strings-from-database myApp directive  dynamic   function   compile      return       replace  true      link  function  scope  ele  attrs          scope  watch attrs dynamic  function html            if   html                return                    ele html  typeof html       string     html   html data            compile ele contents    scope                              Thanks   Andy

User · Accepted Answer

I would use the built-in ngInclude directive  In the example below  you don t even need to write any javascript  The templates can just as easily live at a remote url   Here s a working demo  http   plnkr co edit 5ImqWj65YllaCYD5kX5E p preview   lt p gt Select page content template via dropdown lt  p gt   lt select ng-model  template  gt       lt option value  page1  gt Page 1 lt  option gt       lt option value  page2  gt Page 2 lt  option gt   lt  select gt    lt p gt Set page content template via button click lt  p gt   lt button ng-click  template  page2   gt Show Page 2 Content lt  button gt    lt ng-include src  template  gt  lt  ng-include gt    lt script type  text ng-template  id  page1  gt       lt h1 style  color  blue   gt This is the page 1 content lt  h1 gt   lt  script gt    lt script type  text ng-template  id  page2  gt       lt h1 style  color green   gt This is the page 2 content lt  h1 gt   lt  script gt

User · Answer

See if this example provides any clarification  Basically you configure a set of routes and include partial templates based on the route  Setting ng-view in your main index html allows you to inject those partial views   The config portion looks like this      config    routeProvider   function  routeProvider         routeProvider        when       controller  ListCtrl   templateUrl  list html           otherwise  redirectTo                The point of entry for injecting the partial view into your main template is    lt div class  container  ng-view    gt  lt  div gt

User · Answer

There is a another way also    step 1  create a sample html file   step 2  create a div tag with some id loadhtml Eg    lt div id  loadhtml  gt  lt  div gt   step 3  in Any Controller      var htmlcontent       loadhtml         htmlcontent load   Pages Common contact html        compile htmlcontent contents     scope      This Will Load a html page in Current page

User · Answer

For those  like me  who did not have the possibility to use angular directive and were  stuck   outside of the angular scope  here is something that might help you   After hours searching on the web and on the angular doc  I have created a class that compiles HTML  place it inside a targets  and binds it to a scope   rootScope if there is no  scope for that element          AngularHelper   Contains methods that help using angular without being in the scope of an angular controller or directive     var AngularHelper    function          var AngularHelper   function                         ApplicationName   Default application name for the helper             var defaultApplicationName    myApplicationName                   Compile   Compile html with the rootScope of an application         and replace the content of a target element with the compiled html          targetDom   The dom in which the compiled html should be placed         htmlToCompile   The html to compile using angular         applicationName    Optionnal  The name of the application  use the default one if empty              AngularHelper Compile   function   targetDom  htmlToCompile  applicationName            var  injector   angular injector   ng   applicationName    defaultApplicationName              injector invoke    compile     rootScope   function   compile   rootScope                  Get the scope of the target  use the rootScope if it does not exists             var  scope    targetDom html htmlToCompile  scope                 compile  targetDom   scope     rootScope                rootScope  digest                            return AngularHelper          It covered all of my cases  but if you find something that I should add to it  feel free to comment or edit   Hope it will help

User · Answer

I needed to execute an directive AFTER loading several templates so I created this directive    x000D   x000D  utilModule directive  utPreload   x000D         templateRequest     templateCache     q     compile     rootScope   x000D      function  templateRequest   templateCache   q   compile   rootScope    x000D       use strict   x000D      var link   function scope  element    x000D          scope  watch  done   function done    x000D              if done     true    x000D                  var html       x000D                  if scope slvAppend     true    x000D                      scope urls forEach function url    x000D                          html     templateCache get url   x000D                          x000D                    x000D                  html    scope slvHtml  x000D                  element append  compile html   rootScope    x000D                x000D              x000D         x000D   x000D      var controller   function  scope    x000D           scope done   false  x000D           scope html       x000D           scope urls    scope slvTemplate split       x000D          var promises       x000D           scope urls forEach function url    x000D              promises add  templateRequest url    x000D              x000D           q all promises  then  x000D              function        SUCCESS x000D                   scope done   true  x000D                 function        FAIL x000D                  throw new Error  preload failed     x000D                x000D             x000D         x000D   x000D      return   x000D          restrict   A   x000D          scope    x000D              utTemplate          the templates to load  comma separated  x000D              utAppend          boolean  append templates to DOM after load  x000D              utHtml         the html to append and compile after templates have been loaded x000D             x000D          link  link  x000D          controller  controller x000D         x000D       x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 3 15 angular min js  gt  lt  script gt  x000D   x000D   lt div class  container-fluid  x000D       ut-preload x000D       ut-append  true  x000D       ut-template   html one html html two html   x000D       ut-html    lt my-directive gt  lt  my-directive gt    gt  x000D    x000D   lt  div gt  x000D   x000D   x000D

[javascript] AngularJS How to dynamically add HTML and bind to controller

Examples related to javascript

Examples related to angularjs