Javascript 嵌套AngularJs指令

我有一个带有javascript库的第三方服务，它将从JSON结构生成HTML。HTML是使用一个指令生成的，该指令调用库方法生成HTML，然后将其作为innerHTML

为了扩展它，我已经能够呈现一个自定义HTML标记，我想用我自己的指令处理它

如果我的HTML文件以以下内容开头：

<vendor-directive vendorAttr="doStuff"></vendor-directive>

在供应商库之后，它将导致：

<vendor-directive vendorAttr="doStuff"><my-custom-component>IDabcd1234</my-custom-component></vendor-directive>

IDabcd1234

其中，我的自定义组件有一个我指定的指令，我希望依次计算并异步拉入一些数据，然后将其作为一个复杂的组件或结构输出

最终结果：

<vendor-directive vendorAttr="doStuff">
    <my-custom-coponent>
        <form><input type="text" ... /></form>
    </my-custom-component>
</vendor-directive>

我环顾四周，找到了一些有关$compile的信息，但我无法获得全部图片。AngularJS（最新版本）是否支持此功能，以及实现此功能的基本语法是什么

---

欢迎大家提出建议和范例！祝您愉快，

是的，您可以在控制器或指令中使用$compile

当您知道内容已加载时，请执行此操作

var dynamicDocumentObject = $('vendor-directive');
$compile(dynamicDocumentObject.contents())($scope);

但考虑到您的工作流程，可以考虑一些变通方法

例如，如果您只需在“我的自定义组件”中呈现html而不呈现角度绑定，则可以：

• 使用供应商的代码处理html元素
• 将html分配给某个变量

  内容

• 使用ng bind html unsafe在供应商指令内绑定html

另请参见：

有关嵌套指令的示例，请参见我的答案

由于所问的问题完全不同，我将尝试在这里给出更好的解释。我不完全确定我是否正确理解了这个问题，因此我将按照我的理解进行阐述：

页面加载时，指令的标记不会显示任何特殊内容

您可以异步获取一些数据

处理这些数据并生成一些HTML，然后将它们附加或插入到指令中

看。这只是为了演示transformData指令如何使用videoPlayer指令的方法

require:

属性中声明的父指令的作用域作为

controller

（第四个参数）传递给子指令的链接函数。这允许您向父指令作用域上的子指令公开API

我建议您根本不需要使用

$compile

，尽管我认为编写指令需要阅读$compile文档。以下是我将对plnkr进行的一些调整，以适应您的情况：

directive('myCustomComponent', ['$http', '$sce', function($http, $sce) {
  return {
    scope: {
      url: '@',
      output: '@'
    },
    require: '^parentDirective',
    template: '<div ng-bind-html="output"></div>',
    link: function(scope, elem, attrs, controller) {
      $http({
        url: scope.url,
        method: 'GET', // or whatever
      }).
      then(function(r) {
        var html = controller.getHtml(r.data);
        scope.output = $sce.trustAsHtml(html);
      });
    }
  }
}]);

指令（'myCustomComponent'，['$http'，'$sce'，函数（$http，$sce）{
返回{
范围：{
网址：“@”，
输出：'@'
},
要求：“^parentDirective”，
模板：“”，
链接：功能（范围、元素、属性、控制器）{
$http({
url:scope.url，
方法：“GET”、//或其他任何方法
}).
然后（函数（r）{
var html=controller.getHtml（r.data）；
scope.output=$sce.trustAsHtml（html）；
});
}
}
}]);

当你的应用程序被实例化并且链接函数被执行时，你的异步调用将被执行，当它完成时，这个div将被htmlified返回数据填充

标记：

<my-custom-component url='//someurl.org' ></my-custom-component>

还可以通过指令的输出属性设置一些占位符文本

更新： 在看到Nikolay Baluk的答案后，我不得不做一些更改，以确认angular不会将html转储到页面中，除非您明确告诉它。为此，必须使用$sce服务（内置）<代码>ng bind html unsafe实际上在Angular 1.2中被删除，但是您可以使用上面修改的代码和我的plnkr中的代码获得相同的行为