Angular js directive dynamic templateURL

Question

I have a custom tag in a routeProvider template that that calls for a directive template  The version attribute will be populated by the scope which then calls for the right template    lt hymn ver  before-   week   -   day     gt  lt  hymn gt    There are multiple versions of the hymn based on what week and day it is  I was anticipating to use the directive to populate the correct  html portion  The variable is not being read by the templateUrl   emanuel directive  hymn   function         var contentUrl      return           restrict   E           link  function scope  element  attrs                   concatenating the directory to the ver attr to select the correct excerpt for the day             contentUrl    content excerpts hymn-    attrs ver     html                         passing in contentUrl variable         templateUrl  contentUrl             There are multiple files in excerpts directory that are labeled before-1-monday html  before-2-tuesday html

User · Answer

I have an example about this    lt  DOCTYPE html gt   lt html ng-app  app  gt      lt head gt       lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  gt     lt  head gt      lt body gt       lt div class  container-fluid body-content  ng-controller  formView  gt           lt div class  row  gt               lt div class  col-md-12  gt                   lt h4 gt Register Form lt  h4 gt                   lt form class  form-horizontal  ng-submit    name  f  novalidate gt                       lt div ng-repeat  item in elements  class  form-group  gt                           lt label gt   item Label   lt  label gt                           lt element type    item Type    model  item  gt  lt  element gt                       lt  div gt                       lt input ng-show  f  valid  type  submit  id  submit  value  Submit  class      gt                   lt  form gt               lt  div gt           lt  div gt       lt  div gt       lt script src  https   code jquery com jquery-1 10 2 min js  gt  lt  script gt       lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt       lt script src  https   ajax googleapis com ajax libs angularjs 1 6 2 angular min js  gt  lt  script gt       lt script src  app js  gt  lt  script gt     lt  body gt    lt  html gt      angular module  app            controller  formView   function   scope             scope elements                   Id  1               Type   textbox                FormId  24               Label   Name                PlaceHolder   Place Holder Text                Max  20               Required  false               Options  null               SelectedOption  null                                       Id  2               Type   textarea                FormId  24               Label   AD2                PlaceHolder   Place Holder Text                Max  20               Required  true               Options  null               SelectedOption  null                         directive  element   function              return               restrict   E               link  function  scope  element  attrs                    scope contentUrl   attrs type     html                   attrs  observe  ver   function  v                        scope contentUrl   v     html                                                  template    lt div ng-include  contentUrl  gt  lt  div gt

User · Answer

I had the same problem and I solved in a slightly different way from the others  I am using angular 1 4 4   In my case  I have a shell template that creates a CSS Bootstrap panel    lt div class  class-container panel panel-info  gt       lt div class  panel-heading  gt           lt h3 class  panel-title  gt   title    lt  h3 gt       lt  div gt       lt div class  panel-body  gt           lt sp-panel-body panelbodytpl    panelbodytpl    gt  lt  sp-panel-body gt       lt  div gt   lt  div gt    I want to include panel body templates depending on the route       angular module  MyApp        directive  spPanelBody      compile   function  compile           return               restrict           E               scope   true              link  function  scope  element  attrs                    scope data   angular fromJson scope data                   element append  compile   lt ng-include src        scope panelbodytpl        gt  lt  ng-include gt    scope                                       I then have the following template included when the route is   students    lt div class  students-wrapper  gt       lt div ng-controller  StudentsIndexController as studentCtrl  class  row  gt           lt div ng-repeat  student in studentCtrl students  class  col-sm-6 col-md-4 col-lg-3  gt               lt sp-panel              title    student firstName     student middleName     student lastName                panelbodytpl      student panel-body html                 data    student                 gt  lt  sp-panel gt           lt  div gt       lt  div gt   lt  div gt    The panel-body html template as follows   Date of Birth    data dob   1000   date    dd MMM yyyy      Sample data in the case someone wants to have a go   var student          id               1       firstName         John        middleName                lastName          Smith        dob              1130799600       current-class    5

User · Answer

You can use ng-include directive   Try something like this   emanuel directive  hymn   function        return          restrict   E          link  function scope  element  attrs               scope getContentUrl   function                     return  content excerpts hymn-    attrs ver     html                                 template    lt div ng-include  getContentUrl    gt  lt  div gt              UPD  for watching ver attribute  emanuel directive  hymn   function        return          restrict   E          link  function scope  element  attrs               scope contentUrl    content excerpts hymn-    attrs ver     html              attrs  observe  ver  function v                  scope contentUrl    content excerpts hymn-    v     html                                   template    lt div ng-include  contentUrl  gt  lt  div gt

User · Answer

You don t need custom directive here  Just use ng-include src attribute  It s compiled so you can put code inside  See plunker with solution for your issue    lt div ng-repeat  week in  1 2   gt     lt div ng-repeat  day in   monday    tuesday    gt       lt ng-include src   content before-   week    -    day     html   gt  lt  ng-include gt     lt  div gt   lt  div gt

User · Answer

Thanks to  pgregory  I could resolve my problem using this directive for inline editing   directive  superEdit   function  compile       return          link  function scope  element  attrs               var colName   attrs  superEdit                alert colName                scope getContentUrl   function                     if  colName     Something                         return  app correction templates lov-edit html                    else                       return  app correction templates simple-edit html                                                var template     lt div ng-include  getContentUrl    gt  lt  div gt                 var linkFn    compile template               var content   linkFn scope               element append content

User · Answer

emanuel directive  hymn   function        return          restrict   E          link  function scope  element  attrs                  some ode                  templateUrl  function elem attrs               return attrs templateUrl     some path default html                      So you can provide templateUrl via markup    lt hymn template-url  contentUrl  gt  lt hymn gt    Now you just take a care that property contentUrl populates with dynamically generated path

[angularjs] Angular.js directive dynamic templateURL

Examples related to angularjs

Examples related to angularjs-directive