Angular Directives - Utilizing ng-transclude

Question

I have the following simple 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>

I am linking this to an app.js file that has:

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

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

and the opt-in-template.html looks like:

<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>

My goal is to utilize transclude so that the form and the "div class=brand-logo" show up in the same div in the index.html.

Currently, my index.html shows the brand-logo class, but doesn't actually render the form in the view. Any tips?

Answer 1

1. Close your div tag <div class="opt-in-form"> in the template:

2. Use ng-transcludein your directive template where you want to put your <div class="brand-logo"></div>.

   Give us yr infoz!

Make an plunker. Hope it works. Any problems let me know plz.