使用属性的角度指令无法获取元素内部html

Question

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 1

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).