Not able to add attribute in directive in angular

Question

I have this code in my directive

   compile: function compile (tElement, tAttributes, transcludeFn) {

        if (tAttributes.drag == 'false') {
            tElement.find('.myclass').removeAttr('draggable');
        }

        //attrs.$set('ngModel', 'new value');
        return {
            pre: function preLink (scope, element, attributes, controller, transcludeFn) {
                // Pre-link code goes here
            },
            post: function postLink (scope, element, attributes, controller, transcludeFn) {

This works fine

But i want to add attribute instead of remove attribute based on boolean like this

        if (tAttributes.drag == 'true') {
            tElement.find('.myclass').attr('draggable');
        }

But this is not working.

I thing i need to recompile element after adding but i don't know how to do it

If dragable is directive then look at my answer how to add directive from within directive... stackoverflow.com/a/28622263/1505865 — Jenish Rabadiya
– Jenish Rabadiya, Commented Feb 23, 2015 at 4:42
@JenishRabadiya i tried someting like that before but i was not sure where to put in pre link or post link . also i get error $compile is not a function — user3214546
– user3214546, Commented Feb 23, 2015 at 4:47
include $compile to the directive function like I have done. No need to prelink and postlink but don't try to compile element itself instead get children and compile it and then replace that children. I am considering you are having element directive. — Jenish Rabadiya
– Jenish Rabadiya, Commented Feb 23, 2015 at 4:51
@JenishRabadiya I did include that $compile function and i used that i used inside postLink function and i get same error again — user3214546
– user3214546, Commented Feb 23, 2015 at 4:58

Vinay K · Accepted Answer · 2015-02-24 04:21:45Z

1

Try adding the attribute in template function of the directive definition.

module.run(function ($templateCache, $http) {
    $http.get('__templateURL__')
      .then(function (response){
        $templateCache.put('__templateID', response.data)
      })
  });

module.directive('x', function ($templateCache) {
    return {
      template: function (tEl, tAttrs) {
        var template = $($templateCache.get('__templateID')); 
        if (tAttrs.drag == 'true') {
          template.find('.myclass').attr('draggable');
        }
        return template[0].outerHTML;
      }
    }
  });

edited Feb 24, 2015 at 4:21

answered Feb 23, 2015 at 5:34

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

5 Comments

user3214546 Over a year ago

can i pull template from file and then chnage its attribute. i can't write the whole html as string

Vinay K Over a year ago

Try this...

module.run(function ($templateCache, $http) {     $http.get('__tempalteURL__')         .then(function (response) {             $templateCache.put('__templateID__', response.data);         }) }) .directive('x', function ($templateCache) {     return {         template: function () {             var el = $templateCache.get('__templateID__');             //add the attribute         }     } })

user3214546 Over a year ago

can you write that in above answer , its very hard to understand that in comment

user3214546 Over a year ago

thanks for that , that will work if my template is simple html. my problem is template itself conatin another driective , so at ttime template is not yet compiled into full html so that i can add some attribute. any idea to fix that

Vinay K Over a year ago

That should not be a problem. If you still face the problem.. please create a plunker/fiddle for the same.

underscore · Accepted Answer · 2015-02-23 04:42:02Z

0

jQlite (angular's "jQuery" port) doesn't support lookup by classes.

find() - Limited to lookups by tag name

So you should try querySelector

if (tAttributes.drag == 'true') {
    tElement[0].querySelector('.myclass').attr('draggable');
}

answered Feb 23, 2015 at 4:42

underscore

6,9277 gold badges44 silver badges82 bronze badges

6 Comments

user3214546 Over a year ago

But that removing of attribute is working fine with the code i provided. its only that adding attribute is not wokring because i think the dircetive is already compiled when i add the directive so it dont take into effect

underscore Over a year ago

are you wrapped jquery over angular ?

user3214546 Over a year ago

what u mean by wrapping jquery

underscore Over a year ago

are you included jquery before angular.js ?

underscore Over a year ago

That's why you can use find method here.

|

Collectives™ on Stack Overflow

Not able to add attribute in directive in angular

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related