How to Replace an Angular Attribute

Question

How do I replace an Angular attribute that already has a value in it? For example:

angular.module('app', [])
.directive('edit', function(){
  return {
    template: '<a ng-href="{{data}}">Link Text</a>',
    replace: true,
    link: function(scope, elm, attr){
      scope.data = 'http://www.example.com';
    }
  };
});

HTML:

<a edit ng-href="test"></a>

That just appends the link url to the "test" href. I tried using

elm.attr('ng-href', '{{data}}');

and many variations on that idea, but it didn't work.

are you asking this for any directive or specially for ngHref? — Poyraz Yilmaz
– Poyraz Yilmaz, Commented Apr 2, 2014 at 6:39
Can you show this in a plunkr and explain in the comments what you see vs what you expect... also explaining the higher level goal might help to get a better solution since there are various ways to define directives or organize things. — shaunhusain
– shaunhusain, Commented Apr 2, 2014 at 6:43

Goodnickoff · Accepted Answer · 2014-04-02 06:45:34Z

1

You can use compile function in directive, and redeclare this attribute in it:

.directive('edit', ['$timeout', function($timeout) {
   return {
      template: '<a ng-href="{{data}}">Link Text</a>',
      replace: true,
      restrict:'A',
      compile:function(elm, attr){
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) { 
             iAttrs.ngHref = "{{data}}";
          },
          post: function postLink(scope, iElement, iAttrs, controller) {
            scope.data = 'http://www.example.com';
          }
        }

      }
    }
  }])

http://plnkr.co/edit/lBA9xR1VbWHqHbc5KG7w?p=preview

answered Apr 2, 2014 at 6:45

Goodnickoff

2,2671 gold badge17 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

How to Replace an Angular Attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related