How to use "ng-repeat" in a directive template in Angular JS?

Question

I'm new to Angular JS, and I'm trying to create a custom directive that will be used below:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps. the controller will be:

 $scope.cashAccountsColumns = [ {"field": "description", "title": "Description"}, {"field": "owner", "title":"Owner"}, {"field": "currentBalance", "title":"Current Balance" } ]; 

And the directory code :

 return { restrict : 'EA', transclude : false, templateUrl : 'html/linkedlist.html', scope: { listcolumns: "@" }, link : function(scope, element, attrs) { } } 

pattern :

 <table class="box-table" width="100%"> <thead> <tr> <th scope="col" ng-repeat="column in listcolumns"> {{column.title}} </th> </tr> </thead> </table> 

But that does not work. I do not get the column.title value on the screen, so too many rows have been added to the DOM, as shown below:

 <th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th> 

Answer 1

Passing an entire object with an attribute will not work, you must use two-way binding. Just change the binding from @ to = and change the HTML below to make it work:

changes to directory code :

 // ... scope: { listcolumns: "=" }, // ... 

changes to a template :

  <div linkedlist listcolumns="cashAccountsColumns"></div> 

Answer 2

@ AjayBeniwal's answer is correct, but I feel that he can use some further explanation.

As the Angular documentation points out (in the section "Insulating a Directive's Scope"), the scope parameter is an object that contains a property for each binding of the isolation scope. We use it to separate (isolate) the area inside the directive from the outside area and then map the outside area to the inside area of ​​the directive.

The name of each property of the scope object corresponds to the isolate scope directives. In the sample question, the only property of the scope object is listcolumns . Because of this, html must also have a corresponding attribute that creates the directive:

 <div linkedlist listcolumns="cashAccountsColumns"></div> 

However, the name of the scope property and attribute of the directive should not have the same name. We can match these two values ​​as follows:

 <div linkedlist short-name="cashAccountsColumns"></div> 

-

 controller: function ($scope) { $scope.cashAccountsColumns = 'value'; }, scope: { moreDescriptiveName: "=shortName" }, 

In cases where the attribute name matches the value that you want to bind within the scope of the directive, you can use this shorthand syntax:

 <div linkedlist my-name="cashAccountsColumns"></div> 

-

 controller: function ($scope) { $scope.cashAccountsColumns = 'value'; }, scope: { myName: "=" }, 

In addition, in this example, the value of the attribute of the directive should correspond to the property of the external area of ​​the directive. This is due to the fact that = in =shortName uses bi-directional binding of attributes from the external area to the selection area, causing the value of the directive attribute to be evaluated as an expression. As this answer eloquently indicates, if we just want to pass a literal string, we can either use @ instead of = , or disrupt the selection of the scope directive with double and single quotes:

 scope: { moreDescriptiveName: "@" }, 

OR

 <div linkedlist short-name="'cashAccountsColumns'"></div>