ANGULAR JS dynamic data binding to template

Question

Hello All Angular Friends

I am trying to find a way for dynamic data binding to the template.

Created a test page: http://jsbin.com/jiminey/edit?html,js,output.

Currently I have my HTML

<banner compSrc="banner1"></banner>
<banner compSrc="banner2"></banner>

And the Data

$scope.bannerData ={
  "banner1": {
    "heading": "Hero Test"
    },
  "banner2": {
    "heading": "Page Title (h1)"
  }
};

Template

template: '<div>BannerHeading - {{bannerData.banner2.heading}}</div>'

How can I make this template dynamic based on the compSrc attribute?

I am looking for something like below So I dont have to update the template.

template: '<div>BannerHeading - {{heading}}</div>'

Thank you.

Hamlet Hakobyan · Accepted Answer · 2015-10-29 20:45:27Z

1

You can use isolated scope for directives. Take in account the name normalization.

Here is fixed JSBin

answered Oct 29, 2015 at 20:45

Hamlet Hakobyan

33.5k6 gold badges55 silver badges70 bronze badges

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

3 Comments

Mohamed Rafi Over a year ago

Thank you. That worked Awesome. Any idea how I can refer the data has "-" in between? "banner1-Data": { "heading": "Hero Test" },

Hamlet Hakobyan Over a year ago

- is not valid symbol for identifier.

Mohamed Rafi Over a year ago

Thanks. Modified the data key, removing the '-'

Community · Accepted Answer · 2017-05-23 12:14:33Z

0

Create a directive for your template, and use function as value for your compile property of DDO Plz refer this question on SO: What are the benefits of a directive template function in Angularjs?

app.directive('myDirective', function(){
      return {

        // Compile function acts on template DOM
        // This happens before it is bound to the scope, so that is why no scope
        // is injected
        compile: function(tElem, tAttrs){

          // This will change the markup before it is passed to the link function
          // and the "another-directive" directive will also be processed by Angular
          tElem.append('<div another-directive></div>');

          // Link function acts on instance, not on template and is passed the scope
          // to generate a dynamic view
          return function(scope, iElem, iAttrs){

            // When trying to add the same markup here, Angular will no longer
            // process the "another-directive" directive since the compilation is
            // already done and we're merely linking with the scope here
            iElem.append('<div another-directive></div>');
          }
        }
      }
    });

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Oct 29, 2015 at 16:43

Kulbhushan Singh

5285 silver badges18 bronze badges

1 Comment

Mohamed Rafi Over a year ago

This is not I was looking for. But Thanks. I got the answer.

Collectives™ on Stack Overflow

ANGULAR JS dynamic data binding to template

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related