javascript - Angularjs 自定义指令传递对象数据

Question

我想构建一个自定义指令，我可以在其中传递一个对象，并根据该对象呈现不同的 HTML。

假设对象看起来像这样。

$scope.obj = {
  type: 'input',
  placeholder: 'Some text…',
  name: 'first_name'
}

自定义指令应该是这样的(我猜)

<renderObj data="obj" />

这应该使用给定的数据呈现一个输入字段。我想我必须在指令中使用 link 或 compile 方法，但是如何呢？请注意，obj 可以有许多不同类型的数据，并且会比这个简单的示例更复杂。所以我必须能够在指令中决定用哪些数据渲染什么。

也许我根本不需要自定义指令而是使用 ng-include 代替？

Answer 1

您可以使用 $compile 构建动态 DOM。指令中的代码如下所示:

link: function (scope, element) {
  // ...
  if (data.type === 'input') {
    $compile('<input type="text" placeholder="{{placeholder}} name="{{name}}"></input>')(scope.data, function (clonedElement) {
      element.append(clonedElement);
    });
  }
  // ...

一般来说，我会建议在您的指令模板中尝试尽可能多地执行此操作。想象一下指令的模板，例如:

<div>
  <input ng-if="data.type == 'input'" type="text" placeholder="{{data.placeholder}}" name="{{data.name}}" />
</div>