Question

这是我的代码

// index.html
<my-slider items="items"></my-slider>

// slider.tpl.html
<ul>
  <li ng-repeat="item in items">  // items.length = 10
    <my-thumb my-data="item"></my-thumb>
  </li>
</ul>



// slider.directive.js
angular.module('app')
.directive('mySlider', function () {
  return {
    restrict: 'E',
    templateUrl: 'slider.tpl.html',
    scope: {
       items: '='
    },
    link: function (scope, elem, attrs) {
      console.log(scope.items); // print [{...},{...},{...}.....] 
      var elem.find('ul').css('width', _.sumBy(elem.find('li'), function (o) { $(o).width(); })); 

      // but
      console.log(elem.find('li').size()); // print => 0  ???? why is 0?
    }
  };
});

我想设置ul元素的全宽，但是这个

elem.find('li').size() = 0

为什么它是空的？

Answer 1

您需要先让ng-repeat呈现

尝试使用$timeout，因此代码在下一个摘要

之前不会运行

.directive('my-slider', function ($timeout) {
  return {
    //.....
    link: function (scope, elem, attrs) {
       $timeout(function(){
          console.log(elem.children().length)
      });
    }
})

的 DEMO

为什么不在指令的链接函数中编译？

1 个答案: