AngularJS how to append element to specific element

Question

I want to do an angular directive, which checks the height of an element, and if the height is given, I want to append another element to it. I'm new to Angular, so I dont know exactly how to do it. Here is a snippet of what I did so far:

the HTML:

<ul fadeouttxt>
    <li ng-repeat="cars in cars.list" style="height:200px;">
       <div>
          <div class="cnt">
            <h2>{{cars.title}}</h2>
            <div class="desc" ng-bind-html="cars.description"></div>
          </div>    
       </div>                   
    </li>
</ul>

the js:

.directive('fadeouttxt', function () {
    return {
        link: function (scope) {
            $('div.cnt').filter(function() {
               if( $(this).find('.desc').height() < 130) return;
               $(this).append('<div class="fader"></div>'); 
            }); 
        }
    };
 });

the <div class="fader"></div> is a element which makes the overflowing text fade out...

So, can anyone help me out?

jansepke · Accepted Answer · 2015-06-26 09:04:02Z

1

what you want is this:

the HTML:

<ul>
    <li ng-repeat="cars in cars.list" style="height:200px;">
       <div>
          <div class="cnt" fadeouttxt>
            <h2>{{cars.title}}</h2>
            <div class="desc" ng-bind-html="cars.description"></div>
          </div>    
       </div>                   
    </li>
</ul>

the js:

.directive('fadeouttxt', function () {
    return {
        link: function (scope, element) {
            if( element.find('.desc').height() < 130) return;
            element.append('<div class="fader"></div>');
        }
    };
 });

so you don't need to use jquery.

answered Jun 26, 2015 at 9:04

jansepke

2,0112 gold badges19 silver badges31 bronze badges

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

Comments

Kop4lyf · Accepted Answer · 2015-06-26 09:00:31Z

1

You might want to check out the documentation of the angularJS directive.

The second parameter of the link function is the element on which the directive is placed.

So, you can use the element.append("<div></div>") to put the div dynamically on the directive.

Like,

.directive('fadeouttxt', function () {
    return {
        link: function (scope, element) {
            $('div.cnt').filter(function() {
               if( element.find('.desc').height() < 130) return;
               element.append('<div class="fader"></div>'); 
            }); 
        }
    };
 });

You can check more from here https://docs.angularjs.org/api/ng/function/angular.element

answered Jun 26, 2015 at 9:00

Kop4lyf

4,6001 gold badge27 silver badges31 bronze badges

Comments

Satpal · Accepted Answer · 2015-06-26 09:02:50Z

0

Use element argument which is passed to link

    link: function (scope, element) {
        $(element).find('div.cnt').filter(function() {
           return $(this).find('.desc').height() > 130;
        }).append('<div class="fader"></div>'); 
    }

answered Jun 26, 2015 at 9:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

AngularJS how to append element to specific element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related