Question

我有一组自定义指令，可以通过nav标签有效地构建可嵌套的导航菜单。我以前有一些关于如何获取被抄本文本内容的问题。虽然我已经想到了这一点，我现在想知道是否有任何方法可以删除一个被转换的元素，以便之后不会出现在模板中。 With This Plunker，您可以看到元素正在获取被转换元素的文本。但它仍然包含在ng-transclude div中。

您将能够看到plunker中的代码，但是plunker中相应的代码片段是：

//Other Code Here
controller:function($scope,$element,$attrs,$transclude){
        this.parents = [];

        var el = $transclude();

        if(angular.equals($attrs.menuTitle, undefined)) {
          $attrs.menuTitle= el.text().trim().split('\n')[0];
          el.remove(); //Runs, still leaves the transcluded element
        }





        this.addSubmenu = function(parent){

          this.parents.push(parent);
        };

      },
//Other Code Here

我对$transclude价值的了解很少 - 我在这里工作的那篇文章我偶然发现了很多谷歌搜索和检查这里的问题。

感谢您提供的任何帮助。

Answer 1

我不确定那个应该显示它是否正常工作，所以很难告诉你如何实现它。

希望我能告诉你一些关于转口的事情。

实际上，如果你想对元素转换有更多的控制权，那么你可能想在link函数中处理它，它具有以下签名

link: function (scope, element, attributes, controller, transclude)

然后，在您的链接功能中，您可以使用提供的transclude函数对元素执行某些操作：

transclude(scope, function(clone, scope) {
  element.append(clone);
});

第一个参数是您希望被转换元素绑定到的范围。

旁注：默认功能是控制器的新（非隔离）子范围， transcluding 指令位于其中.I.e。如果您使用具有隔离范围的指令，则默认情况下，已转换的内容无法看到它。你可能不需要担心这个例子。

第二个参数是一个函数，它接受克隆元素和该元素的新范围。在此函数中，您可以将clone附加到指令的element，将其放在模板内的某个位置，之前或之后，或者完全忽略它。

最后，请记住 ng-transclude 是指令本身。基本上ng-transclude是上面的开箱即用的实现（虽然它使用不同的范围，如旁注中所述）。因此，如果您使用transclude函数和，模板中仍然有ng-transclude，那么您将找到两个已转换元素的副本。换句话说，如果您没有自己手动转录内容，请仅使用ng-transclude。

Answer 2

您可以删除ng-transclude并使用$transclude函数手动执行转换：

$transclude(function (clones) {
  if ($attrs.menuTitle === undefined) {
    $attrs.$set('menuTitle', clones.text().trim().split('\n')[0]);
  }

  var children = [];

  angular.forEach(clones, function (el) {
    // only transclude DOM node that you need here
    if (el.nodeName === 'PARENT' || el.nodeName === 'CHILD') {
      children.push(el);
    }
  })

  $element.find('div').append(children);        
});

示例Plunker： http://plnkr.co/edit/jLvhzcX0uh1xQTTqtxXu?p=preview

删除已转换的元素

2 个答案: