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

前端之家收集整理的这篇文章主要介绍了angularjs – 在链接函数中找不到指令templateUrl中的元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的指令代码

// 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,但在更深层次上没有任何内容

解决方法

你应该在$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

猜你在找的Angularjs相关文章