嵌套的 AngularJs 指令答案

【问题标题】：Nested AngularJs directives嵌套的 AngularJs 指令
【发布时间】：2014-08-20 17:12:09
【问题描述】：

我有一个带有 javascript 库的 3rd 方服务，该库将从 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>

my-custom-component 有一个我指定的指令，我想依次评估和拉入一些异步数据，然后将其作为复杂的组件或结构输出。

最终结果：

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

我环顾四周，找到了一些关于 $compile 的信息，但我无法获得完整的图片。 AngularJS（最新版本）是否支持此功能以及使其正常工作的基本语法是什么，

热烈欢迎提出建议和例子！祝你有美好的一天，

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

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

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

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

但考虑到您的工作流程，请考虑一些解决方法。

例如，如果您只需要在 my-custom-coponent 中渲染 html 而不是角度绑定，您可以：

使用供应商代码处理 html 元素
将html分配给某个变量content
在供应商指令using ng-bind-html-unsafe中绑定html

另见：Compiling dynamic HTML strings from database

【讨论】：

【解决方案2】：

有关嵌套指令的示例，请参阅我的回答 to this question。

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

页面加载，指令的标记没有特别显示。
您异步获取一些数据。
您处理该数据并生成一些 HTML，然后您希望将其附加或插入到您的指令中。

见this fork of my original plnkr。这只是为了演示 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);
      });
    }
  }
}]);

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

标记：

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

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

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

【讨论】：