Smarty PHP clashing with AngularJS

All we need is an easy explanation of the problem, so here it is.

How do I stop Smarty throwing an error when I’m using AngularJS in the same template. I have a Smarty page template with this code:

 <li ng-repeat="i in items">
      <p class="item">{{i}}</p>
 </li>

And I’m getting a blank page when I view in a browser. I get a big error in my apache error_log, which contains the following:

 PHP Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template ... <p>{{i}}</p>; unknown tag "i

If I swap {{i}} for {{4}} or any other digit it works fine. And I can use maths as well, {{8+2}} will show 10 in the page. Is that the Smarty doing the maths of the angularJS?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Much cleaner solution: You can change the template delimiters of AngularJS thusly:

angular.module('app', [])
  .config(['$interpolateProvider', function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }]);

Method 2

Try this:

<li ng-repeat="i in items">
    <p class="item">{literal}{{i}}{/literal}</p>
</li>

Quote from Smarty site…

{literal} tags allow a block of data to be taken literally. This is
typically used around Javascript or stylesheet blocks where {curly
braces} would interfere with the template delimiter syntax. Anything
within {literal}{/literal} tags is not interpreted, but displayed
as-is.

Method 3

You can configure Angular to use interpolation symbols other than {{}}: https://stackoverflow.com/a/11108407/215945

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply