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