角度指令 - NG-transclude利用

Question

私は、次のような単純なindex.htmlを持っている：

<header> 
    <h1> Acme Inc. </h1> 
</header> 

<section> 
    <opt-in> 
     <!-- set brand logo image as background for this css class --> 
     <div class="brand-logo"></div> 
    </opt-in> 
</section> 

私が持っているapp.jsファイルにこれをリンクしています：

を

var app = angular.module('myApp', []); 

app.directive('optIn', function() { 
return { 
    templateUrl: 'opt-in-template.html', 
    restrict: 'AE', 
    transclude: true, 
} 
}); 

とopt-in-template.htmlは次のようになります。

<div class="opt-in-form"> 
<form> 
    <input placeholder="first name" /> 
    <input placeholder="last name" /> 
    <input placeholder="email" /> 
    <button type="submit"> Give us yr infoz!</button> 
</form> 

私の目標は、フォームと「のdivクラス=ブランドロゴは」index.htmlをで同じdiv要素に表示されるようにtranscludeを利用することです。

現在、私のindex.htmlはブランドロゴクラスを示していますが、実際にはビュー内にフォームを表示しません。任意のヒント？

Answer 1

1. テンプレートであなたのdivタグ<div class="opt-in-form">を閉じます：

2. 使用ng-transcludeあなた<div class="brand-logo"></div>を入れたいあなたのディレクティブのテンプレートに。

   私たちの年のinfozを与えます！

plunkerしてください。それがうまくいくことを望みます。問題があればplzを知ることができます。