0

我有一组自定义指令可以通过 nav 标签有效地构建可嵌套的导航菜单。之前对如何获取转入文本的内容有一些疑问。虽然我已经弄清楚了，但我现在想知道是否有任何方法可以删除嵌入的元素，以便之后它不会出现在模板中。使用 This Plunker，您可以看到元素正在获取嵌入元素的文本。但它仍然包含在ng-transcludediv 中。

您将能够看到 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价值的了解很少——我在这里工作的那篇文章只是通过大量谷歌搜索和检查问题偶然发现的。

感谢您提供的任何帮助。

4

2 回答 2

1

我不确定那个 plunker如果它正在工作应该显示什么，所以很难告诉你如何实现它。

希望我能告诉你更多关于 transclude 的信息。

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

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

然后，在你的链接函数中，你可以使用提供的transclude函数对元素做一些事情：

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

第一个参数是您希望嵌入元素绑定到的范围。

旁注：默认功能是包含指令的控制器的新（非隔离）子范围。即，如果您使用具有隔离范围的指令，则转入内容看不到它默认情况下。不过，对于此示例，您可能不需要担心这一点。

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

最后，rememberng-transclude本身就是一个指令。本质上ng-transclude是上面的一个开箱即用的实现（尽管它使用了不同的范围，如旁注中提到的）。因此，如果您使用该transclude函数并且您的模板中仍然有ng-transclude，那么您将找到两个嵌入元素的副本。换句话说，仅ng-transclude当您自己不手动嵌入内容时才使用。

于 2014-08-15T09:12:14.090 回答
1

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

于 2014-08-15T10:41:58.290 回答