Question

我想设置一个指令，以加快我正在做的一些表格建设。如果我写这样的元素是可能的

<input type="text" name="someName" placeholder="A Placeholder" form-title="Some Name" />

最终呈现为

<div class="formKey">
    Some Name
</div>
<div>
    <input type="text" name="someName" placeholder="A Placeholder" form-title="Some Name" />
</div>

所以基本上它只是用一些html包装指令所在的元素。我已经看到了用于更改html的angulars指令选项template，以及用于保留内部html的transclude，但我无法找到执行此操作的任何内容。这可能吗？

Answer 1

是的，您使用transclude走在了正确的道路上。

尝试类似：

app.directive('customInput', function() {
    return {
      restrict: 'A',
      transclude: element,
      scope: { form-title: '@' },
      templateUrl: 'page.html'
    };
  });

Page.html：

<div class="formKey">
    {{form-title}}
</div>
<div ng-transclude></div>

并从您的HTML中调用它：

<input customInput type="text" name="someName" placeholder="A Placeholder" form-title="Some Name" />

Answer 2

基本上你可以做一些链接，但是你需要添加一个自定义指令，如下所示：

    <custom-input form-title="Some Name">
        <input type="text" name="someName" placeholder="A Placeholder"/>
    </custom-input>

然后添加指令代码

    myApp.directive('customInput', function() {
      return {
        restrict: 'E',
        transclude: true,
        scope : {
            formTitle : '@'
        },
        templateUrl: 'my-wrapper.html'
      };
    });

my-wrapper.html是

<div class="formKey">
    {{formTitle}}
</div>
<div ng-transclude></div>

希望这有帮助!!!

用html包装指令元素

2 个答案: