Removing href with angular directive

Question

I am trying to remove href or ng-href attributes from an angular(v1.2.28) Directive

it works fine when the url doesn't have the string interpolation in it.

Could you please help me figure this out?

I just made a jsfiddle here http://jsfiddle.net/gfvewv5u/1/

angular.module('ui.directives', []);
angular.module('ui', ['ui.directives']);

angular.module('ui.directives', []).directive('uiTool', 
  function() {
  return {
    restrict: 'EAC',
    require: '?ngModel',
    link: function($scope, element, attrs, controller) {
        var controllerOptions, options;
        attrs.$set('href', null);
        element.removeAttr('href');
        element.text('iamfoo for what');
    }
  };
});

angular.module('myApp', ['ui.directives'])
  .controller('testCtrl', function($scope){
    $scope.val = 1;
  });

And HTML

<div ng-app="myApp">
    <div ng-controller="testCtrl">
        <a ui-tool href="/test/ts/{{val}}" >Link need to be removed</a>
        <a ui-tool href="/test/ts" >Link remove</a>
    </div>
</div>

Based on my example the first link still got the href while the 2nd link doens't

Answer 1

You need to destroy the scope on the element that has a bound value. Angular keeps track of these bindings internally, and will reset the href.

element.scope().$destroy();

like so:

link: function($scope, element, attrs, controller) {
    element.scope().$destroy();
    element.removeAttr('href');
    element.text('iamfoo for what');
}

updated fiddle