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>

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

1 个答案: