Question

我正在尝试在固定宽度div元素中包含滚动条ul列表。假设div外部div是300px宽度，而包含页面中ul列表的每个div可以具有不同的宽度，该宽度根据组成它的li元素的数量而变化。

我在angular指令中使用ul可滚动列表构建这些div。在同一指令中，我想设置包含UL元素的这些单个div的宽度。

这是我到目前为止的代码......

mainApp.directive('mimiInfoline', function(){

  function link(scope, element, attrs, $index) {
    // let's count how many elements in the list we got. Luckily Angular give us the scope in the directive
    var numOfSingleLineElm = 0;
    for(var singleLineElement in scope.csi) {
      numOfSingleLineElm++;
    }
    var tempSecWidth = 200 * numOfSingleLineElm;
    element.find('#my-list').css('width',tempSecWidth + "px");
    element.attr('id','myelmnum' + scope.index);
    var requestElement = '#' + element.attr('id');
    new IScroll(requestElement, { scrollX: true, scrollY: false, mouseWheel: true });
  }
  return {
    restrict: 'A',
    replace: true,
    scope: {
      index: '=',
      csi: '='
    },
    templateUrl: 'views/mimi-custom-list.html',
    link: link
  };
});

这是单个html

<div class="log-widget-list">
  <div id="my-list">
    <ul class="list clearfix">
      <li class="pull-left" ng-repeat="linfo in csi.linesInfo | orderBy: 'linfo.specDesc'">
        <h4 class="align-center">{{linfo.shortCode}}</h4>
        <div class="clearfix">
          <span class="icon-clock pull-left"></span>
          <span class="pull-right"> {{linfo.specDesc}}min</span>
        </div>
      </li>
    </ul>
  </div>
</div>

我遇到的问题是，我确切地获得了所需元素的数量，并且每个UL元素中都需要列表元素的数量。但是如果第一个UL元素有2个li元素，那么我认为围绕UL（#my-list）的div有400 px的宽度，而如果第二个UL元素有7个li元素，我希望相对div的宽度为1400px （＃我的列表）。相反，在指令构造结束时，我有两个div＃my-list，宽度为1400px，好像第一个div元素（#my-list）的css属性被第二个div元素覆盖。

有没有办法纠正这种行为？

编辑：

如果我想尝试为ul：

周围的div创建唯一标识符，这是修改

element.find('#my-list').addClass('linenum' + scope.index).css('width',tempSecWidth + "px");

我仍然有同样的行为..

Answer 1

您可以通过将它们传递到$ scope或在所有用户上使用ng-repeat来提供不同的ID，并使用track-by来获取索引。此外，您应该更改此行：

element.find('#my-list').css('width',tempSecWidth + "px");

因为它选择所有列表并调整其CSS。你需要做一些像

这样的事情

...find('#' + $scope.passedId)...

角度设置不同列表上的不同ID

1 个答案: