custom directive as slide

[artdias90]

I would like to show my custom directives inside each slide:

<slick init-onload=true data="produto" class="slider single-item" current-index="index" slides-to-show=1 slides-to-scroll=3>
            <featured-teaser teaser-content="produto[0]"></featured-teaser>
            <featured-teaser teaser-content="produto[0]"></featured-teaser>
            <featured-teaser teaser-content="produto[2]"></featured-teaser>
        </slick>

'produto' is a promise, and it is sent as parameter to my directive.

Directive code:

<div ng-hide="!teaserContent" class="featured-teaser row item-wrapper">
  <h3 class="text-left"><a href="https://twitter.com/search?f=tweets&q=focadasemana" target="_blank"><i class="fa fa-hashtag"></i>FocaDaSemana</a></h3>
  <img
    ui-sref="produto({produtoId: teaserContent.idProduto})"
    class="featured-image col-xs-12 col-sm-4"
    ng-src="{{teaserContent.fotoProduto}}"
    alt="{{teaserContent.nomeProduto}}"
    title="{{teaserContent.nomeProduto}}">
  <span class="col-xs-12 col-sm-8 text-center">
    <h1
      class="featured-title"
      ng-class="{'no-name': !teaserContent.nomeProduto}">
      <a ui-sref="produto({produtoId: teaserContent.idProduto})">
        {{!teaserContent.nomeProduto? 'Sem descrição' : (teaserContent.nomeProduto | limitTo: 80)}} {{teaserContent.nomeProduto.length > 80? '...' : ''}}
      </a>
    </h1>

    <h5>Na <a class="teaser-owner" ui-sref="loja({lojaId: 3})">Loja do Marcelo</a> por apenas</h5>
    <h1 class="text-center" ng-class="{'no-price': teaserContent.precoAmericanas == 0}"><b>{{teaserContent.precoAmericanas != 0? (teaserContent.precoAmericanas | currency: 'R$') : 'Sem preço' }}</b></h1>
    <div class="ratings pad">
      <p>{{teaserContent.visitaProduto}} Visitas</p>
      <p class="text-red">
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
        <span class="glyphicon glyphicon-star"></span>
      </p>
    </div>
    <a class="btn btn-info" ui-sref="produto({produtoId: teaserContent.idProduto})">Mais detalhes</a>
  </span>
</div>

When i inject the directive template above directly under slick it works. How to make it work calling the directive instead?

[2stopme]

+1

[mescalito]

+1

[artdias90]

Just wrap your directives in a div and it solves the problem.