Question

我想做一个角度指令，它检查一个元素的高度，如果给出了高度，我想要附加另一个元素。我是Angular的新手，所以我不知道该怎么做。这是我到目前为止所做的一小部分：

HTML：

  renderSectionHeader: function(sectionData, sectionID) {
    return (
      <View style={styles.section}>
        <Text style={styles.sectionText}>{sectionID}</Text>
      </View>
      )
  },

js：

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

那么，任何人都可以帮助我吗？

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。

Answer 2

您可能需要查看angularJS指令的文档。

link函数的第二个参数是放置指令的元素。

因此，您可以使用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

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

AngularJS如何将元素追加到特定元素

3 个答案: