sag Surya sag Surya - 5 months ago 31
AngularJS Question

angular directive using attribute cant get element inner html

I am trying something with attribute instead of element in custom directive.

<div dotdot>{{description}}</div>


I have created 'dotdot' directive to check length of description.

the code is below:

.directive('dotdot', function(){
return {
restrict: 'A',
transclude: true,
replace: true,
scope:true,
link:function(scope,ele,attr){
console.log(ele[0].innerHTML);// shows blank
console.log(ele.html()); // shows blank
}
}
})


I am getting nothing in console (console.log(ele[0].innerHTML)) as I want length of text content for further operation.

Answer

First of all, you restrict your directive to 'E' (E stands for Element). Which means only <dotdot>{{ description }}</dotdot> would work. Your provided HTML displays dotdot as an attribute. So restrict: 'E' should be resrict: 'A' (A stands for Attribute).

Secondly, why don't you pass the value of description to the directive through it's scope? Something along the lines of <div dotdot="description"></div>. It would be easier to $watch changes and act accordingly. Plus, if you keep your code in the link function like this, there may be a change your console.log will output {{description}}, because the digest cycle has not run yet. (which is not what you want).