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

Question

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

0

Я хочу сделать угловую директиву, которая проверяет высоту элемента, и если задана высота, я хочу добавить к ней еще один элемент. Я новичок в 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>

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

<div class="fader"></div> - это элемент, который затухает переполняющий текст...

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

ST80 26 июнь 2015, в 11:07

Источник

Теги:

javascript

jquery

angularjs

3 ответа

0

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

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

Satpal 26 июнь 2015, в 07:22

0

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

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

Таким образом, вы можете использовать element.append("<div></div>") чтобы динамически element.append("<div></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

Kop4lyf 26 июнь 2015, в 07:21

Ещё вопросы

Jan S · Accepted Answer · 2015-06-26T07-25-00.000Z

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

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>

js:

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

поэтому вам не нужно использовать jquery.