AngularJS как добавить элемент к определенному элементу

Question

Я хочу сделать угловую директиву, которая проверяет высоту элемента, и если высота задана, я хочу добавить к ней еще один элемент. Я новичок в Angular, поэтому я точно не знаю, как это сделать. Вот отрывок из того, что я сделал до сих пор:

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> 

в ЯШАХ:

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

<div class="fader"></div> является элементом, который делает перетекание текста исчезать ...

Итак, может ли кто-нибудь помочь мне?

Answer 1

что вы хотите, это:

в 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> 

в ЯШ:

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

так что вам не нужно использовать JQuery.

Answer 2

Возможно, вы захотите ознакомиться с документацией директивы angularJS.

Второй параметр функции ссылки - это элемент, на котором размещена директива.

Итак, вы можете использовать element.append("<div></div>"), чтобы динамически делиться с директивой.

Мол,

.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>'); 
      }); 
     } 
    }; 
}); 

Вы можете проверить более здесь https://docs.angularjs.org/api/ng/function/angular.element

Answer 3

Используйте element аргумент, который передается link

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