65

How do I use a custom delimiter for angular JS? I'd like to change from the {{ var }} syntax to [[ var ]].

Can somebody show me a complete example on how to implement this with Angular?

Andy Fleming
  • 7,655
  • 6
  • 33
  • 53
Azri Jamil
  • 2,394
  • 2
  • 29
  • 37

1 Answers1

106

You can use $interpolateProvider to change start / end symbols used for AngularJS expressions:

var myApp = angular.module('myApp', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

and then, in your template:

Hello, [[name]]

Here is the working jsFiddle: http://jsfiddle.net/Bvc62/3/

Check the documentation on the $interpolate service here: http://docs.angularjs.org/api/ng.$interpolate

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • 1
    Tried still not working in my app, nothing happen angular still looking for {{ }} bracket. – Azri Jamil Oct 16 '12 at 22:43
  • 5
    Could you try to compare what is goin on in the setup of your web app to the fiddle I've sent? As you can see it works ok in the fiddle in the response. Watch out for code around module initialization. Are you specifing ng-app="myApp" like in the jsfiddle? – pkozlowski.opensource Oct 16 '12 at 22:52
  • Hi, how do we configure the custom brackets for modules like bootstrap.ui?` – DarkLeafyGreen Apr 23 '13 at 10:01
  • Just starting with AngularJS and within Laravel 4 I loaded the framework and then added {{2+2}} to the view - nothing else at all and it evaluated to 4. Where do I put the code to change this to [[2+2]]? I've tried adding it between script tags on the same page and adding ng-app="myApp" to the containing div tag but it doesn't work. – Perkin5 Sep 17 '13 at 14:43
  • 3
    Does anyone know if there's an "official" fallback `startSymbol` and `endSymbol` that the community prefers to see? – yurisich Jun 21 '14 at 19:12
  • FYI: `oModule.directive('myDirective', ['$interpolate', function ($interpolate) { /*...*/ }]);` is how I had to reference the `$interpolateProvider`, this was not imminently obvious (at least to me ;). – Campbeln Dec 26 '14 at 13:05
  • 1
    You can put the start and end symbols in one line now. Like this --> `$interpolateProvider.startSymbol('[[').endSymbol(']]');` – MiniGunnR May 29 '15 at 10:30
  • It's NOT working for me as well, i'm using laravel 5 and angular 1.3.0, html just renders [[variable]] as it is. – Kundan Atre Jul 19 '15 at 08:55
  • The Angular JS documentation link is not available anymore. The new link is [link](https://docs.angularjs.org/api/ng/provider/$interpolateProvider). – Niclas von Caprivi Dec 10 '18 at 14:27