Laravel 5.4 with angular variable error

Question

I'm trying to use Angular 1.6 in Laravel blade it raise exception. I have tried this link to solve and many other answer I have tried but non of these worked for me. here is code

<div class="row" ng-app="CalculatorApp" ng-controller="CalculatorController">
    <p>Profit Before {{ var }} </p>
</div>

here is Js co

angular.module('CalculatorApp', []).controller('CalculatorController', 
 function($scope) {
 $scope.var=0;
    });

here is error/exception

use of undefined constant var - assumed 'var'

Don't use "var" it is a reserved word in javascript, declares a variable. — axel.michel
– axel.michel, Commented Aug 25, 2017 at 16:35
@axel.michel I have another name in my js. just to be on point/error I have changed it. for more understandable — Mahmood Sanjrani
– Mahmood Sanjrani, Commented Aug 25, 2017 at 16:37

axel.michel · Accepted Answer · 2017-08-25 17:18:20Z

2

Both Laravel and Angular use the double curly brackets per default, this is causing your error:

in Blade you can mark a complete block as string:

@verbatim
<div class="row" ng-app="CalculatorApp" ng-controller="CalculatorController">
    <p>Profit Before {{ var }} </p>
</div>
@endverbatim

Or your angular:

var sampleApp = angular.module('sampleApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
});

In this case all your angular template code has to use something like <%var%>

edited Aug 25, 2017 at 17:18

answered Aug 25, 2017 at 16:48

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

axel.michel Over a year ago

Might be the blade cache? - have a look at: stackoverflow.com/questions/28548694/…, could be helpful.

axel.michel Over a year ago

@MahmoodSanjrani be aware that you just change one of both (either angular or blade, if you change both, you reproduce the error. Or try the blade option "entire block as-is" (see updated answer).

Mahmood Sanjrani Over a year ago

sir I have checked these individually. expect Blade::setContentTags('<%', '%>'); when i use this is show an other error. may be I'm not putting the code in right place. Call to undefined method Illuminate\View\Compilers\BladeCompiler::setContentTags()

Mahmood Sanjrani Over a year ago

sir can you please tell me where should I put this Blade::setContentTags('<%', '%>'); code. may be because of this . I'm facing error.

axel.michel Over a year ago

@MahmoodSanjrani I just checked the issues board at lavarel, seems that the team deleted that option: github.com/laravel/framework/issues/17736 - no way to do this any longer, you'll need to escape the complete block, or using @{{xxx}}

|

Murwa · Accepted Answer · 2017-08-25 16:47:49Z

1

Use @ to escape blade processsing angular interpolation.

<div class="row" ng-app="CalculatorApp" ng-controller="CalculatorController">
    <p>Profit Before @{{ var }} </p>
</div>

answered Aug 25, 2017 at 16:47

Murwa

2,2881 gold badge21 silver badges22 bronze badges

4 Comments

Mahmood Sanjrani Over a year ago

sir I have used it . as I have Link/url/href in my Question. but it only print the value including {{}} .

Murwa Over a year ago

did u change template tags for angular or laravel? u also need to check if you've bootstrapped angular

Mahmood Sanjrani Over a year ago

sir I'm using bootstrap and I have included Angular external link. I tried to change blade tags and angular tags ,, but none to these are working for me. :(

Mahmood Sanjrani Over a year ago

can you tell me where should I change blade tag. may be I'm putting code in wrong file.\

Raja Mohamed · Accepted Answer · 2017-08-25 16:39:16Z

0

Var is keyword in JavaScript , I hope rename the variable name enough to fix.

answered Aug 25, 2017 at 16:39

Raja Mohamed

1,0269 silver badges22 bronze badges

1 Comment

Mahmood Sanjrani Over a year ago

Check my comment on question

Niklesh Raut · Accepted Answer · 2017-08-25 16:42:24Z

0

Laravel is also using same template tags so its check for laravel variable. change for angular like this

 $interpolateProvider.startSymbol('[{');
 $interpolateProvider.endSymbol('}]');

answered Aug 25, 2017 at 16:42

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Raja Mohamed · Accepted Answer · 2017-08-25 16:43:33Z

0

angular.module('CalculatorApp', [$scope]).controller('CalculatorController', function($scope) { $scope.var1=0; });

Check this out.

answered Aug 25, 2017 at 16:43

Raja Mohamed

1,0269 silver badges22 bronze badges

2 Comments

Mahmood Sanjrani Over a year ago

$scope.var1=0; ? sir I have told you there is not issue of variable name. I have other name in my JS function.

Raja Mohamed Over a year ago

Find another change there inside [$scope]

Mahmood Sanjrani · Accepted Answer · 2017-08-25 18:22:07Z

0

I solved my problem.

1) I changed library.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

2) changed code Putted after body start.

    <body>
    var custom = angular.module('CalculatorApp', []);
custom.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});
custom.controller('CalculatorController', function($scope) {
    $scope.aa=0;

    });

html .

<div class="row" ng-app="CalculatorApp" ng-controller="CalculatorController">
        [[ aa ]]
     </div>

Thanks to everyone who tried to solve this problem. Thank you so much.

answered Aug 25, 2017 at 18:22

Mahmood Sanjrani

1103 silver badges19 bronze badges

Collectives™ on Stack Overflow

Laravel 5.4 with angular variable error

6 Answers 6

6 Comments

4 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

4 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related