Question

Angular的新手，需要一些帮助。

我有一个HTML内容块，它将来自一个包含一组小部件的数据库。这些是简单的小部件，基本上会呈现出各种元素，但出于这个问题的目的，我们假设它们都是内部的基本HTML。

这些小部件以不可预测的方式包含在内，所以我首先想到的是使用指令来呈现HTML。所以，我们有类似的东西：

<div widget data="This is the content."></div>

所以我有一个指令将data的值放入div。够容易！

现在，我将如何进行嵌套这些小部件？那么，我怎么会得到这样的东西：

 <div widget data="Welcome! ">
    <div widget data="This is some inside content."></div>
 </div>

渲染：

Welcome! This is some inside content.

...因为我注意到的问题是，如果我在指令HTML中放置任何内容，它实际上会被忽略，因为它被自己的结果替换（因此只回显Welcome!）。

我意识到我可能首先在这方面走错了方向，所以任何见解都会受到高度赞赏。非常感谢！

Answer 1

您需要在此处使用指令的transclusion功能以及ng-transclude指令。

指示使用包含转义的最近父指令的转换DOM的插入点的指令。

在插入转换内容之前，将删除放置此指令的元素的任何现有内容。

基于您的示例翻译内容的基本版本可能如下所示：

.directive('widget', function() {
  return {
    transclude: true,//Set transclusion
    template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
    scope: {
      text: "@"
    }
  }
});

<强>演示

＆＃13;

angular.module('app', []).directive('widget', function() {
  return {
    transclude: true,
    template: '{{text}} <section ng-transclude></section>',
    scope: {
      text: "@"
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <span widget data-text="Welcome! ">
    <div widget data-text="This is some inside content.">
      <span widget data-text="This is some inside inside content."></span>
    </div>
  </span>
</div>

＆＃13;

如何在AngularJS中动态嵌套指令

1 个答案: