As a newcomer to Angular, I am exploring the use of custom directives for the first time. Currently, I have a table where each cell contains a data attribute such as "data-dept="service". Before applying a directive to overwrite this value, I would like to access and store it. However, setting 'template = true' in my directive removes the data attribute.
To better illustrate my challenge, I have included a link to my website:
The cells in the first row of the table are clickable, but I need to determine which value the user is selecting, such as 'service'.
Update
I have created a plunker to demonstrate the issue more clearly. I am using a directive to replace a row in a basic table, resulting in the loss of the necessary attribute that serves as a key in my object for later use.
http://plnkr.co/edit/oXRM6lRkidnAHfBA4GsR?p=preview
HTML
<tr>
<td name="valueIneed" hello-world>John</td>
<td>Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf6f3f4f2dcf9e4fdf1ecf0f9b2fff3f1">[email protected]</a></td>
</tr>
Directive
app.directive('helloWorld', function($parse) {
return {
template: '<td><input type="text"></td>',
replace: true,
transclude: 'true',
scope: {
position: '='
},
link: function (scope,element,attrs,ngModel) {
console.log(attrs.attribute);
scope.clickMe = function () {
console.log('clicked');
scope.isChecked = true;
};
}
};
});