AngularJS directive templateUrl function using 2-way data binding [duplicate]

Question

I try to parameterize the template of a page using a directive. I have an array of objects with a 'type' value. I want to use different templates when types are different.

Here is what I tried:

directive.js

angular.module('core')
  .directive('mySolutionDisplay', function () {
    return {
      restrict: 'E',
      scope: {
        solution: '='
      },
      templateUrl: function (elem, attr) {
        return 'path/to/template/solution-'+attr.type+'.template.html';
      }
    };
  });

view.html

<div class="row">
  <my-solution-display type="vm.solution[0].type" solution="vm.solution"></my-solution-display>
</div>

I get the following error : angular.js:11706 Error: [$compile:tpload] Failed to load template: path/to/template/solution-vm.solution[0].type.template.html

I tried replacing type="vm.solution[0].type" by type="{{vm.solution[0].type}}" but it just added the curly brackets to the error message.

<div class="row"> <my-solution-display type="{{vm.solution[0].type}}" solution="vm.solution"></my-solution-display> </div> — Jideobi Benedine Ofomah
– Jideobi Benedine Ofomah, Commented Aug 8, 2016 at 10:42
Have you tried like that, i think at type="" it does not resolve the variable name and you can try adding the curly braces there — Jideobi Benedine Ofomah
– Jideobi Benedine Ofomah, Commented Aug 8, 2016 at 10:43

Chanthu · Accepted Answer · 2016-08-08 10:42:31Z

0

Attributes (attrs) has no access to scope variable. They get the dom value after they have been interpolated.

So, use

<my-solution-display type="{{vm.solution[0].type}}" solution="vm.solution"> </my-solution-display>

Note how type="vm.solution[0].type" was changed to type="{{vm.solution[0].type}}"

answered Aug 8, 2016 at 10:42

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

2 Comments

JulienM Over a year ago

I already tried this but it just adds the curly brackets in the error description.

angular.js:11706 Error: [$compile:tpload] Failed to load template: path/to/template/solution-{{vm.solution[0].type}}.template.html

Chanthu Over a year ago

Yeah, ignore my answer. Looks like that's just not possible. See the bug: github.com/angular/angular.js/issues/13526. Have a look at: stackoverflow.com/questions/21835471/… for another way of solving this problem.

Collectives™ on Stack Overflow

AngularJS directive templateUrl function using 2-way data binding [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related