Incompatibility between Blade and Angular JS in Laravel 5

Navigation
3

I'm having trouble using AngularJS along with Laravel's Blade. After searching this site myself, I discovered that to resolve the conflict with Laravel the most recent method is using @{{}} in variable calls.

The page is loaded, array is traversed, generating the rows of the records, but no information is shown.

Here is the piece of my code that gives this error: 

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

I also read that I should not use the Blade with Angular, but I find it very practical to use, and I would like to continue. Is this method the most correct and recent?

Well, I've already done some of the change of the Blade keys, I have to make an interpolation to change the Angular, and it's in the same error.

The page loads without error in Laravel, but does not load the information.

As I can not comment, I'll edit it.

So far so it is 

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

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

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

but now the error is in this line 

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

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

    
asked by anonymous 10.01.2017 / 19:57

2 answers

8

Both the AngularJS and the Blade give you the option to change the "interpolator."

In the example, I'm moving to <% variavel %> .

No AngularJS

Just create a config by injecting $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><divng-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

Set the interpolator using setContentTags in some configuration class

Example (class in App \ Providers \ AppServiceProvider ): 

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

Just as an add-on:

  

I also read that I should not use the Blade with Angular, but I find it very practical to use, and I would like to continue, is this method the most correct and recent?

There is nothing to prove that Blade with Angular should not be used. There are even a number of libraries and courses that teach you how to use them together.

Do not take everything you say is wrong for you. In fact, it is a great choice, if you can execute it correctly, use Laravel and Angular in the same project.

I even have some projects where I use Angular and it is very productive.

  

... The page loads without error in Laravel, but does not load the information.

@jbueno's answer has already answered your question very well. You can use to change the interpolator (on one side, or Blade or Angular) to avoid conflicts.

You can still do as you suggested in the answer: using @ before {{ and }} tags.

I suggest opening your browser's console and checking that there is no error message, since you said that there are no errors in Laravel.

If this is the case, let us know if there is an error on the console, to see if you need to edit or ask another question to solve your problem

    
11.01.2017 / 16:39
How to create a new configSections in App.config Printing specific lines from a text file