Question

我有一个带有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>

my-custom-component有一个我指定的指令，我想反过来评估并提取一些数据异步，然后将其输出为复杂的组件或结构。

最终结果：

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

我环顾四周，发现了一些关于$ compile的信息，但我无法获得整个图片。这是否支持AngularJS（最新版本）以及使其工作的基本语法是什么，

建议和实例热烈欢迎！祝你有愉快的一天，

Answer 1

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

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

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

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

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

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

另见：Compiling dynamic HTML strings from database

Answer 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将使用htmlified返回数据填充。

标记：

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

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

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

嵌套的AngularJs指令

2 个答案: