How to define custom angularjs-directive that change only Attribute, not (replacing/appending) whole HTML tag

Question

I'm using AngularJS in my project !

I have following JSON

{
    "headers" :["A","B","C"]
    "rows":[
        ["a","b","c"],
        ["d","e","f"]
    ]
}

Also following template:

<table>
    <thead>
        <tr>
            <th ng-repeat="header in data.headers" ng-bind="header"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data.rows">
            <td ng-repeat="item in row track by $index" ng-bind="item"></td>
        </tr>
    </tbody>
</table>

I want to change

<td ng-repeat="item in row track by $index" ng-bind="item"></td>

to

<td ng-repeat="item in row track by $index" ng-bind="item" data-my-directive></td>

and get this:

<td data-title='C'>f</td> // `C` refer to headers[2], because f is row[2]

The main qusetion is, how to define a directive and force that replace (not add) the attribute, not whole HTML tag. (not how to access headers[2] value or something like that)

As we know, the template (or templateUrl) of a directive define a complete HTML tag structure (for example <div>SOMETHING</div>) and replace that (if replace: true) or append the template inside the caller tag.

Please note

Now I have no error or issue, everything working fine, but I need this solution to add more future to my code. I mean I got JSON data on the table and no problem with this part.

Hugo G. · Accepted Answer · 2015-07-29 16:38:23Z

1

There is no out of the box solution that works like replace:true but affect attribute instead of tag.

If you really need this, you can remove the attribute in the link function

angular
  .module('app')
  .directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attributes) {
            element.attr('data-title', 'C');
            element.removeAttr('myDirective');
        }
    };
});

edited Jul 29, 2015 at 16:38

answered Jul 29, 2015 at 15:54

Hugo G.

6366 silver badges22 bronze badges

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

5 Comments

Hugo G. Over a year ago

this answer "how to define a directive and force that replace one attribute, not whole HTML tag" for me

Mehdi Dehghani Over a year ago

your solution add new data-x to the tag, but the question is "ow to define a directive and force that replace (not add) the attribute, not whole HTML tag"

Hugo G. Over a year ago

Do you mean, you want to remove data-my-directive, ng-bind attributes and replace it with your data-title attribute ?

Mehdi Dehghani Over a year ago

not ng-bind, just replacing name of directive with new data-x attribute

Hugo G. Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to define custom angularjs-directive that change only Attribute, not (replacing/appending) whole HTML tag

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related