How do i append my attribute to a element in my Angular directive

Question

I have a table in a template I want to populate with different data. My approach is using directives in Angular. I managed to make a template out of my table but I have no idea how to apply the value for the ng-repeat attribute from my html.

Here's a part of my index.html

<div id='unannounced' kc-item-table>
</div>

And here's a part of my template

<table class='table'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat='item in changableItemList'>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
        </tr>
    </tbody>
</table>

Heres my directive

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})

So in order to reuse the template I want to be able to change the

ng-repeat='item in itemList'

But I have no idea how to append it to right element.

you dont need to do anything just change value of itemList ? — ngLover
– ngLover, Commented Jul 9, 2015 at 11:31
Yes, i want to be able to change to another list to fill my table with different types of items — Oscar
– Oscar, Commented Jul 9, 2015 at 11:34

ngLover · Accepted Answer · 2015-07-09 11:39:45Z

1

Here is the simple explaination with your code./

Your html template -

<table class='table'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat='item in changableItemList'>
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
        </tr>
    </tbody>
</table>

Directive-With an isolate Scope

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        scope :{
           itemList :'='
           },
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})

You can use directive with different list --

     <div id='unannounced' kc-item-table item-list='ItemList1'>
        </div>
 <div id='unannounced' kc-item-table item-list='ItemList2'>
        </div>

answered Jul 9, 2015 at 11:39

ngLover

4,6183 gold badges24 silver badges42 bronze badges

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

Comments

Jeremy · Accepted Answer · 2015-07-09 11:35:47Z

1

What you are trying to do is a very basic feature of AngularJS: data-binding to directives.

Check out the documentation about directives: https://docs.angularjs.org/guide/directive

Here is a very basic example forked from the above docs:

Main template:

  <div my-customer name="naomi"></div>
  <div my-customer name="boby"></div>

Directive:

.directive('myCustomer', function() {
    return {
      scope: {
        name: "@"
      },
      template: 'Name: {{name}}'
    };
  });

http://plnkr.co/edit/r9tIzwxCFyEyAU3NX0G1?p=preview

To clarify, what you need in your case is a "scope" property on your directive. You will be able to pass the scope values through the DOM element attributes.

answered Jul 9, 2015 at 11:35

Jeremy

3511 silver badge3 bronze badges

Comments

Arno_Geismar · Accepted Answer · 2015-07-09 11:56:42Z

Thats easy just add this to your div where you add your attribute directive.

<div ng-controller="YourCustomController" id='unannounced' kc-item-table>
</div>

then in YourCustomController you would put a $scope property called. $scope.changableItemList;

Or if you want multiple of these directives on the same page you can work with an isolated scope and do :

 <div id='unannounced' kc-item-table customList='customList2'/>

 <div id='unannounced' kc-item-table customList='customList1'/>

and in your directive do:

//you will need a controller above this which has $scope.customList declared

app.directive('kcItemTable', function() {
    return {
        restrict: 'E',
        scope :{
           customList :'=' //isolated scope with customList passed in
           },
        templateUrl: 'scripts/controllers/itemTableTemplate.html'
    }
})

Collectives™ on Stack Overflow

How do i append my attribute to a element in my Angular directive

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related