Я хочу сделать угловую директиву, которая проверяет высоту элемента, и если задана высота, я хочу добавить к ней еще один элемент. Я новичок в 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>
- это элемент, который затухает переполняющий текст...
Так может ли кто-нибудь помочь мне?
что вы хотите:
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.
Использовать аргумент element
который передается в link
link: function (scope, element) {
$(element).find('div.cnt').filter(function() {
return $(this).find('.desc').height() > 130;
}).append('<div class="fader"></div>');
}
Возможно, вам захочется ознакомиться с документацией директивы 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