CODEWITHSUNDEEP
angularjsangularjs-directive
Oscar
Oscar

Reputation: 375

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

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.

Upvotes: 0

Views: 272

Answers (3)

Arno_Geismar
Arno_Geismar

Reputation: 2330

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'
    }
})

Upvotes: 0

ngLover
ngLover

Reputation: 4588

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>

Upvotes: 1

Jeremy
Jeremy

Reputation: 351

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.

Upvotes: 1

Related Questions