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?
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.
Much cleaner solution: You can change the template delimiters of AngularJS thusly:
angular.module('app', [])
.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}]);
You can configure Angular to use interpolation symbols other than {{}}: http://stackoverflow.com/a/11108407/215945