Angularjs 如何阅读内容而不是在JS中转写？

我正在开发一个用户可以自定义的UI。我的UI模型是基于JSON的，但对于最终用户，他们希望以这样一种方式对其进行定制，即在HTML中提供一些特定的标记。他们希望外部指令解析并处理该内容，而不是转包该内容。在实际场景中，outer指令的模板中有一个table元素。内部标记只是告诉这个指令需要显示JSON模型中提供的所有列

为了更好地理解这一点，下面是一个简化的示例：

如您所见，在使用指令my-angular-dir1的div中，有一些内容不应该按原样被排除：

<I>
<br>&lt;div my-angular-dir1>
<br>&nbsp;&nbsp;    &lt;div my-angular-dir2="myData.node1"></div>
<br>&nbsp;&nbsp;    &lt;div my-angular-dir2="myData.node2"></div>
<br>&lt;/div>
</I>

我现在的要求是，能够在链接函数中或My-angular-dir1的其他地方获得像div My-angular-dir2=myData.node1>/div>这样的内部标记，以便我可以使用该信息来决定外部指令需要显示什么

---

如何实现这一点？

您可以使用如下指令：

app.directive('outer', function() {
  return {
    restrict: 'E',
    transclude: true,
    link: function (scope, element, attrs, controller, transclude) {
      transclude(scope, function(clone, scope) {
        console.log(clone.html());
      });
    }
  };
});

<outer>hello</outer>

然后，如果您的HTML如下所示：

app.directive('outer', function() {
  return {
    restrict: 'E',
    transclude: true,
    link: function (scope, element, attrs, controller, transclude) {
      transclude(scope, function(clone, scope) {
        console.log(clone.html());
      });
    }
  };
});

<outer>hello</outer>

您不会看到写入DOM的hello，但会看到它是通过console.log调用写入的。在transclude函数中，您可以访问内部元素，并可以决定如何处理它们。

下面是一个示例

您需要使用手动转换并利用模板功能。transclude:true在调用模板函数之前删除内容，因此需要手动转换

app.directive('myAngularDir1', function ($compile) {
    return {
        restrict: 'A',
        template: function (tElement, tAttr) {
            console.log('template: ' + tElement.html());

            var content = tElement.children();
            content.remove();
            //process the content using a service (not shown)
            var processedContent = angular.element('<div>ProcessedContent</div>');
            //re-add to the directive
            tElement.append(processedContent);
            return '<div>Label: <input type="text" ng-model="myData.name">' + tElement.html() + '</div>'
        },
        replace: true,
        compile: function (element, attr) {

            console.log('compile: ' + element.html());

            //we are going to need to do manual transclusion:
            var transcludedContent = element.children();
            element.children().remove();
            return function (scope, element, attr, controller) {
                // How to get the content like:
                //  <div my-angular-dir2="myData.node1"></div>
                // that is in inside the current div in the HTML ??

                console.log('link: html: ' + element.html());

                //finish the manual transclusion
                var newScope = scope.$parent.$new();
                element.append($compile(transcludedContent)(newScope));


            };
        }
    }
});

---

谢谢，我可以收养它。我们需要使用模板，因为这是扩展此UI的另一种方式。但我想，通过动态加载模板，我们仍然可以使用它。谢谢Andrew，理解起来很有帮助。尽管如此，我还是得到了已经处理过的元素，例如{{node.name}}，而不是