Question

这是我的指令代码：

// Generated by CoffeeScript 1.6.3
(function() {
  var autumnDirectives;

  autumnDirectives = angular.module('autumnDirectives', []);

  autumnDirectives.directive('timeline', function() {
    return {
      scope: {
        timeline: '='
      },
      templateUrl: 'partials/timeline/_timeline.html',
      controller: function($scope, $element, $attrs) {
        return console.log($scope.timeline);
      },
      link: function(scope, el, attrs) {
        console.log(el);
        return console.log(el.find(".item"));
      }
    };
  });

}).call(this);

我的模板：

<div class="timeline clearfix">
    <div class="item" ng-repeat="item in timeline">
        <div class="row">
            <div class="content">{{ item.content }}</div>
        </div>

        <div class="row">
            <div class="connect_line"></div><div class="connect_line"></div>
        </div>
    </div>
</div>

由于某种原因，jqlite find不返回item元素（长度为0） - 或者任何元素。如果我在链接函数中追加一个元素，那么我就能找到它，否则就没有。

当我记录el时，它返回正确的元素，如果我冒险进入带有chromes检查工具的孩子，我可以找到.item。

我认为一旦模板准备好就会调用该链接？这里出了什么问题，或者我不理解某些事情？

否则一切正常

由于

注意：我能够在.timeline类的层次结构中找到第一个div，但在更深层次上找不到任何内容

Answer 1

您应该在$timeout：

中运行它

$timeout(function(){
  console.log(el.find(".item"));
})

ngRepeat注册带有回调的$ watchCollection会发生什么当$ digest发生时，该回调克隆DOM元素。在$ digest之前没有DOM元素可用。在$ digest之后运行$ timeout，因此我们可以安全地引用DOM元素。

我做了一个plunker来检查元素何时加载到DOM：http://plnkr.co/edit/X8PuOQhhbQB3Gv657R35?p=preview

Answer 2

您使用.item生成ng-repeat。当时，ng-repeat指令未完成渲染。

那时，HTML看起来像这样:(使用console.log(el[0].outerHTML)）

<div timeline="" class="ng-isolate-scope">
   <div class="timeline clearfix">
     <!-- ngRepeat: item in timeline -->
   </div>
</div>

Answer 3

另一种方法是为“item”编写一个指令并使用它的链接功能。

在链接函数中找不到指令templateUrl中的元素

3 个答案: