get the value of the child element of directive

Question

I have these directive

  app.directive("myarticle",function($timeout){
   return {
   restrict: "E",
     replace: true,
     templateUrl: "templates/article.html",

    link: function(scope, element, attrs) {

   element.getVal()
   }
   ,
    scope: {
   cat: "=",
  mainurl: "="
}
  }

});

here is the directive template

 <div class="span2 ">
   <a href="#/cat/{{cat.id}}"> link to cat</a>
 </div>

the jquery getVal function

  (function($) {

    $.fn.getVal = function() {

    this.each(function() {
  var url =$(this).find("a").attr("href");
 console.log(url);
 });
  };
 })(jQuery);

the function is so long , I tried to simplify it as I can

what I expected to render is "#/cats/1" but what is rendered is "#cats/{{cat.id}}"

so how can I get the value of expression not the expression it self

Answer 1

You have to use ng-href (instead of href) in your template:

<div class="span2">
   <a ng-href="#/cat/{{cat.id}}"> link to cat</a>
</div>

And the wrap getVal() method in $timeout to retrieve href attribute after a digest cycle:

$timeout(function() {
    element.getVal();
})

PS: I don't know what are you trying to achieve but reading attributes values from your template into your scope is definitely not the best practice. A better idea would be to construct the href attribute in your directive a use it directly in your view (like scope.carUrl = '#/cat/' + cat.id' and then <a ng-href="{{catUrl}}">)