Tech Tip: Change AngularJS template delimiters
I have recently been doing some development with the Bottle Python web app framework. Unfortunately it’s simple template system uses the same template delimiters as Angular (“{{” and “}}”). Worse you cannot change these delimiters in Bottle.
Fortunately you can change them in Angular using the following:
var myApp = angular.module('talkpoint', [], function($interpolateProvider) {
// set custom delimiters for angular templates
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
Which given a Controller looking like this:
myApp.controller('TodoCtrl', ['$scope', function($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
}]);
Allows you to write Angular template code looking like this:
<div ng-controller="TodoCtrl" class="row">
<ul >
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-[[todo.done]]">[[todo.text]]</span>
</li>
</ul>
</div>