javascript - AngularでHTMLコンテンツをトランスクルージョンする正しい方法は何ですか?

Question

ログアウト ボタンを含む をカスタム選択ドロップダウン ディレクティブの 1 つにトランスクルージョンする必要がありdivますが、トランスクルードされたコンテンツはディレクティブ テンプレート内ではなく、外側になります。たとえばSome content、HTML の代わりにディレクティブ内に文字列を入れると、transclude が機能します。しかし、HTML を配置するとすぐに、動作を拒否します。

私の質問は、HTML コンテンツをディレクティブ テンプレートに変換する最も簡単で正しい方法は何ですか?

指令：

coForms.directive('coSelect', [function() {

    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        controller: 'CoFormsCtrl',
        controllerAs: 'co',
        templateUrl: 'app/views/components/co-forms/co-select.html',
        link: function(scope, element, attrs, ctrl) {


        }
    };
}]);

使用法：

<!-- This is inside a loop, where it should only appear for the first row, hence the ng-if="$first" -->
<co-select>
    <div ng-if="$first" class="logout-wrapper">
        <a ng-href="/logout">
            <button class="btn-danger plain">Logout</button>
        </a>
    </div>
</co-select>

テンプレート：

<div>
  <ul>
    <li>The options list yo</li>
  </ul>
  <!-- Transcluded content should go here -->
  <div ng-transclude></div>
</div>