指令无法访问被转换的元素？

Question

我可能会得到一些非常错误的概念,但是我没想到这个我想到的:http : //plnkr.co/edit/Qe2IzMMMR5BJZJpwkx9e?p=preview

我要做的是定义一个附加到顶级<nav>元素的指令,然后在其链接函数中修改包含的DOM元素(例如将css类添加到其他内容<li>).但是,链接函数似乎只获取原始指令template(<nav><ul><ng-transclude/></ul></nav),而不是transcluded/expanded DOM元素.

如果这是"按设计",我应该怎么做？如果它没有访问被转换的DOM树的话,它会发现定义一个包含"root"指令是没用的....

Answer 1

请阅读我关于角度转换的一些答案:

• 在angularjs中,transclusion的主要用途是什么？
• 为什么我无法访问正确的范围？

至于你的问题:

• 首先,它并非无用,即使不适合您的用例.
• 是的,它的设计-但它只是默认行为的ng-transclude.
• 如果恰恰相反,那么每个人都会对范围泄漏大喊大叫.
• 你可以做任何你想做的事$transclude,只要小心.
• 可能有更好的解决方案,例如使用绑定创建隔离范围.

这就是你想要的(plunker):

angular.module('app').directive ('myNav', ['$timeout', function($timeout) {
  return {
    replace: false,
    transclude: true,
    template: '<nav><ul></ul></nav>',
    link: function (scope, element, attrs,ctrl,$translcude){
      $transclude(scope,function(clone){
        element.find('ul').html(clone)
      });
      var items = element.find('li'); //element.find('ng-transclude') === 1 !
      window.console.log (items.length);
    }
  };