CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Louis345
Louis345

Reputation: 740

get an element attributes values using Angular after using template

I am relatively new to Angular and this my first attempt at using a custom directive. I have a table I am working with and each cell has a data attribute. For example, "data-dept="service", and I would like to access this value before overwriting it with a directive. In my directive, I have set template = true, and this removes my data attribute.

I liked my website that I am working to better explain what I am attempting to do. http://partnerportal-preprod.automate-webservices.com/list/#/hoursTable

The cells inside the table in the first row are clickable, but I would like to know if the user is clicking on service for example.

Update

I created plunker to better illustrate my problem. I have a basic table that I am using a directive to replace a row in the table. In doing so, I lose the attribute that I would need to set it 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>[email protected]</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;
         };

             }
         };
     });

Upvotes: 2

Views: 448

Answers (1)

georgeawg
georgeawg

Reputation: 48968

First remove replace: true.

Second to see the value of the name attribute:

console.log(attrs.name);

By using replace: true, the directive was replacing the element that had the name attribute.

replace:true is Deprecated1

From the Docs:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

  • true - the template will replace the directive's element.
  • false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API

From GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636

Upvotes: 1

Related Questions