角指令 - 利用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> 

我的目標是利用transclude，這樣的形式和「DIV CLASS =品牌標識」在index.html的同一div顯示出來。

目前，我的index.html顯示品牌徽標類，但實際上並未在視圖中呈現該表單。有小費嗎？

Answer 1

1. 閉上你的div標籤<div class="opt-in-form">模板：

2. 使用ng-transclude在你的指令模板，你想要把你<div class="brand-logo"></div>。

   給我們年infoz！

做一個plunker。希望它有效。任何問題讓我知道PLZ。