Angular Directives - 利用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 = brand-logo”显示在index.html的同一个div中。

目前，我的index.html显示了品牌徽标类，但实际上并未在视图中呈现该表单。有什么提示吗？

Answer 1

1. 关闭模板中的div标签<div class="opt-in-form">：

2. 在您的指令模板中使用ng-transclude，以便放置<div class="brand-logo"></div>。

                             给我们你的信息！   

制作plunker。希望它有效。任何问题都让我知道了。