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>