Question

我希望尽可能避免重复自己的页眉。所以，我正在考虑做这样的事情：

<header>
    <title>Forms</title>
    <actions>
        <action ng-click="showNewFormModal()">New Form</action>
        <action ng-click="showHelp()">?</action>
    </actions>
</header>

希望得到

<div class="page-header">
    <div class="left">
        <h3>Forms</h3>
    </div>

    <div class="right">
        <a class="btn btn-default" role="button" ng-click="showNewFormModal()">New Form</a>
        <a class="btn btn-default" role="button">?</a>
    </div>

    <div class="clearfix"></div>
</div>

如您所见，<header>包含自定义元素<title>，<actions>和<action>，它们仅适用于<header>元素。< / p>

Angular有可能这样吗？我该如何做到这一点？

Answer 1

看到这个jsbin我把它放在一起，展示了如何用自定义指令完成它。我在使用名称header和title时遇到了问题（尽管我可以做到这一点几乎是肯定的），例如，我是用户my-header和{{ 1}}

无论如何，我把前两个元素放在一起，其余的将遵循相同的约定。您还可以在每个指令上设置依赖关系和范围，即my-title必须位于action父元素内

actions

您的HTML将如下所示：

app.directive('myHeader', function() {
  return {
    restrict: "E",
    transclude: true,
    template: "<div class='page-header'><div ng-transclude></div></div>"
  };
});

app.directive('myTitle', function() {
  return {
    restrict: "E",
    transclude: true,
    template: "<div class='left'><div ng-transclude></div></div>"
  };
});

生成的HTML将如下所示：

<my-header>
    <my-title>Forms</my-title>
</my-header>

AngularJS指令中的自定义元素？

1 个答案: