AngularJS指令中的自定义元素？

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>元素。

在Angular中这样的事情可能吗？ 我将如何完成？

Answer 1

请参阅我整理的这个jsbin ，它显示了如何使用自定义指令来完成。 我在使用名称header和title遇到了麻烦（尽管我几乎可以做到），例如，我使用了my-header和my-title

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

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>

生成的HTML将如下所示：

<my-header>
    <div class="page-header">
        <div ng-transclude="">
            <my-title class="ng-scope">
                <div class="left">
                    <div ng-transclude="">
                        <span class="ng-scope">Forms</span>
                    </div>
                </div>
            </my-title>
        </div>
    </div>
</my-header>