1
resposta

Inserir uma Parcial dentro de outra

Professor, estou precisando inserir uma Partial dentro de outra. :( Tenho minha index chamando a primeira parcial:

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="pt-br" ng-app="alurapic">
    <body>
        <div class="container"> 
            <ng-view>
            </ng-view>
        </div><!
    </body>
</html>

Acompanhando sua aula, facilmente adiciono principal.html em index.html.

<!-- public/partials/principal.html -->
<div class="jumbotron">
    <h1 class="text-center">Alurapic</h1>
</div>
<div class="row">
    <div class="col-md-12">
            <ng-view>
                  //FormAluno.html  DEVE ENTRAR AQUI
            </ng-view>
    </div> <!-- fim col-md-12 -->
</div> <!-- fim row -->
<div class="row">
    <meu-painel class="col-md-2 painel-animado" ng-repeat="foto in fotos | filter: filtro" titulo="{{foto.titulo}}">
        <img class="img-responsive center-block" src="{{foto.url}}" alt="{{foto.titulo}}">
    </meu-painel>
</div>

Este é o módulo que adiciona a principal.html em index.html

angular.module('alurapic', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider.when('/Cadastro', {
            templateUrl: 'partials/principal.html'
        });
    });

Com eu poderia inserir FormAluno.html em Principal.html?

<!-- public/partials/FormAluno.html -->
    <form>
         <input class="form-control" placeholder="filtrar pelo título da foto" ng-model="filtro" ng-model-options="{ debounce: 500 }">
    </form>
1 resposta

Oi Eduardo,

A diretiva ngView deveria ser usada apenas para decidir qual partial seria carregada baseado na url. No seu código, se estiver na url /Cadastro, apenas a partial principal.html será usada dentro de <ng-view>.

Para separar o código do FormAluno.html em outra partial, deveria ser criada uma outra rota só pra ela:

angular.module('alurapic', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider.when('/Cadastro', {
            templateUrl: 'partials/principal.html'
        });
        $routeProvider.when('/CadastroAluno', {
            templateUrl: 'partials/FormAluno.html'
        });
    });

Outro jeito de separar o código do FormAluno.html é transformá-lo numa diretiva, como foi feito com a diretiva <meu-painel>.