javascript - AngularJS如何将元素附加到特定元素

Question

我想做一个 Angular Directive(指令)，它检查元素的高度，如果给定高度，我想向其附加另一个元素。我是 Angular 的新手，所以我不知 Prop 体该怎么做。这是我到目前为止所做的一个片段:

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>是一个使溢出文本淡出的元素...

那么，有人可以帮我吗？

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>

js:

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

所以你不需要使用jquery。