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

【问题标题】：Cannot find elements within directive templateUrl, in link function在链接函数中找不到指令 templateUrl 中的元素
【发布时间】：2014-01-22 13:43:43
【问题描述】：

这是我的指令代码：

// 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 时，它会返回正确的元素，如果我使用 chrome 检查工具冒险进入孩子，我能够找到 .item。

我认为一旦模板准备好就会调用该链接？是这里出了什么问题，还是我不明白什么？

否则一切正常

谢谢

注意：我可以使用 .timeline 类找到层次结构中的第一个 div，但在更深层次上找不到任何东西

【问题讨论】：

你在使用 jQuery 吗？
是的，我已经包含了 jquery
是否包含在angular.js之前？
是的，它包含在 angular 之前。
可能在链接函数运行时，timeline 仍未填充到外部作用域上。请将console.log(scope.timeline) 放入您的链接功能中查看。

标签： angularjs angularjs-directive

【解决方案1】：

你应该在$timeout里面运行它：

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

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

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

【讨论】：

【解决方案2】：

您正在使用ng-repeat 生成您的.item。当时，ng-repeat 指令还没有完成渲染。

当时的HTML是这样的：（使用console.log(el[0].outerHTML)）

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

【讨论】：

感谢 Khanh，我的链接代码准备好后如何运行？
@Melbourne2991：你不应该。当使用像 angular js 这样的 MVC 框架时，视图应该是 as passive as possible 并且不应该被监听。再想想你的代码设计。你可以用另一种方式来做。你想做什么？
这解决了我的问题：`scope.$watch('timeline', (newValue, OldValue) -> if newValue.length > 0 # console.log(newValue))`，有什么问题吗有了这个？肯定存在需要对 ng-repeat div 中的元素执行 dom 操作的情况？你能推荐一个替代方案吗？
@Melbourne2991：是的，你应该只听你的模式的变化。那should be the solution。我无法确认，因为我不知道您要做什么。
我的猜测是ng-repeat 在链接函数运行时甚至还没有开始渲染。子元素的后链接功能在父元素的后链接功能之前运行。只是尚未填充数据。

【解决方案3】：

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

【讨论】：