嵌套的AngularJs指令

时间:2014-08-20 17:12:09

标签: javascript html 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>

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

最终结果:

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

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

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

2 个答案:

答案 0 :(得分:0)

是的,您可以在控制器或指令中使用$ 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

答案 1 :(得分:0)

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

由于提出的问题完全不同,我将尝试在此处给出更好的解释。我并不完全确定我是否正确理解了这个问题,所以我会按照我的理解将其列出来:

  1. 页面加载,指令的标记没有特别显示。
  2. 您异步获取一些数据。
  3. 您处理该数据并生成一些您想要附加或插入指令的HTML。
  4. 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中修改的代码获得相同的行为。