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

Angularjs custom directive passing object data

本文关键字：对象 数据 自定义 指令 Angularjs      更新时间：2023-09-26

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

假设物体是这样的

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

自定义指令应该看起来像这样(我猜)

<renderObj data="obj" />

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

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

您可以使用$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>
相关文章：