3

Eu estou tendo problema em usar o AngularJS junto com o Blade do Laravel. Depois de pesquisar neste site mesmo, descobri que para resolver o conflito com o Laravel o método mais recente é usando o @{{}} na chamadas de variáveis.

A página é carregada, o array é percorrido, gerando as linhas dos registros, mas nenhuma informação é mostrada.

Aqui está o pedaço do meu código que dá esse erro:

<table class="table table-striped">
    <thead>
        <tr>
            <th ng-click="ordenar('convite.id')">Nº Convite</th>
            <th ng-click="ordenar('convite.numero')">Processo</th>
            <th ng-click="ordenar('convite.descricao')">Descrição</th>
            <th>Lançado em:</th>
            <th></th>           
        </tr>
    </thead> 
    <tbody>
        <tr dir-paginate="convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">
             <td>
                 00 @{{convite.id}} @{{convite.ano}}/NFS
             </td>
             <td>@{{convite.numero}}</td>
             <td>@{{convite.descricao}}</td>
             <td>@{{convite.create_up}}</td>
             <td>
                 <button class="btn btn-info btn-xs" ng-click="editar(convite)">Editar</button>
                 <button class="btn btn-danger btn-xs" ng-click="excluir(convite)">Excluir</button>
             </td>
         </tr>
     </tbody>
 </table>

Li também que não devo usar o Blade com Angular, mas acho muito prático de usar, e gostaria de continuar. Esse método é o mais correto e recente?

Pois já fiz alguns de mudar as chaves do Blade, fazer interpolação para mudar a do Angular, e fica no mesmo erro.

A página carrega sem erro no Laravel, mas não carrega as informações.

como não estou conseguindo comentar vou editar

até agora esta assim

var app = angular.module('cdg',['angularUtils.directives.dirPagination']);

angular.module('cdg').config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

E o PHP:

<?php

namespace confin\Providers;

use Illuminate\Support\ServiceProvider;

use Blade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
       Blade::setContentTags('<%', '%>');        
       Blade::setEscapedContentTags('<%%', '%%>'); 
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

<tr dir-paginate=" convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">
                        <td>
                           00 <% convite.id %><% convite.ano %>/NFS
                        </td>
                        <td><% convite.numero %></td>
                        <td><% convite.descricao %></td>
                        <td><% convite.create_up %></td>
                        <td>
                           <button class="btn btn-info btn-xs" ng-click="editar(convite)">Editar</button>
                           <button class="btn btn-danger btn-xs" ng-click="excluir(convite)">Excluir</button>
                        </td>
                     </tr>

mas agora o erro esta nesta linha

<tr dir-paginate=" convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5">

ErrorException in b021106ac8c34a8a693202610529e170cbe12876.php line 49: Use of undefined constant convite - assumed 'convite' (View: C:\xampp\htdocs\confin\resources\views\convite.blade.php)

8
  • O problema provavelmente não é na incompatibilidade, mas outra coisa que está errada. Commented 11/01/2017 às 14:19
  • <tr dir-paginate=" convite in convites | filter: pesquisar |orderBy:sortKey:reverse |itemsPerPage:5"> essa é a linha do erro Commented 11/01/2017 às 19:04
  • Carlos, primeira coisa: você tem que fazer SÓ UMA DAS CONFIGURAÇÕES. Ou no Angular OU no Blade.
    – Jéf Bueno
    Commented 11/01/2017 às 19:05
  • 1
    Por favor, não use o trecho de código para marcar coisas como PHP ou códigos que não são executáveis dentro do site, o uso do Trecho de código (Stack Snippet) é executar CSS, HTML e JS. PHP não roda dentro do site. Para colocar PHP use o Amostra de código (ou pelo Atalho Ctrl+K). Leia para entender melhor: meta.pt.stackoverflow.com/a/4463/3635
    – Syzoth
    Commented 11/01/2017 às 19:07
  • 1
    Possível duplicata de Como usar Angular JS e Laravel 4 sem conflitar com o blade? Commented 12/01/2017 às 12:32

2 Respostas 2

8

Tanto o AngularJS quando o Blade te dão a opção de mudar o "interpolador".

No exemplo, estou mudando para <% variavel %>.

No AngularJS

É só criar uma config injetando $interpolateProvider

angular.module('app', []);

angular.module('app').config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
});

angular.module('app').controller('mainController', mainControllerFn);

function mainControllerFn(){
  this.nome = "JBueno";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="mainController as ctrl">
    <% ctrl.nome %> <br> <!-- Novo modo - funciona -->
    {{ ctrl.nome }} <!-- Modo antigo, não vai funcionar mais pro AngularJS. Agora a sintaxe {{}} é exclusiva do Blade -->
  </div>  
</div>

No Blade

Defina o interpolador usando setContentTags em alguma classe de configuração

Exemplo (classe em App\Providers\AppServiceProvider):

class AppServiceProvider extends ServiceProvider
{
    /**
     * @return void
     */
    public function boot()
    {
         \Blade::setContentTags('<%', '%>');        //para variáveis
         \Blade::setEscapedContentTags('<%%', '%%>'); //para dados "escapados"
    }
}
0
3

Apenas como complemento:

Li também que não devo usar o Blade com Angular, mas acho muito prático de usar, e gostaria de continuar, esse método é o mais correto e recente?

Não existe nada que comprove que não se deve usar Blade com Angular. Há inclusive várias bibliotecas e cursos que ensinam a usá-los juntos.

Não tome para você tudo que dizem que é errado. Na verdade, é uma ótima escolha, se souber executá-la corretamente, usar Laravel e Angular no mesmo projeto.

Inclusive eu mesmo tenho alguns projetos onde uso o Angular e é bem produtivo.

... A página carrega sem erro no Laravel, mas não carrega as informações.

A resposta do @jbueno já respondeu muito bem a sua dúvida. Você pode utilizar mudar o interpolador (de um dos lados, ou no Blade ou no Angular) para poder não haver conflitos.

Ainda assim, você poderá fazer como você mesmo sugeriu na resposta: utilizando o @ antes das tags {{ e }}.

Sugiro abrir o console do seu navegador e checar se lá não há alguma mensagem de erro, já que você disse que no Laravel não há erros.

Se for o caso, nos informe se há ou não erro no console, para avaliarmos se você precisa editar ou então fazer outra pergunta pra resolver o seu problema

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .