Angular.js Custom Tag  Delimiter’s

Define your own custom tag delimiters to change {{ myScopeVar }} to your own syntax, such as {! myScopeVar !}.

Angular’s templating system is wonderful, and it build’s on some common practices established years ago by the Handlebars templating engine. Sometimes I encounter projects where an existing templating system conflicts with Angular, such as a server-side templating language like Mozilla’s Nunjucks or PHP’s popular Twig template engine. In these situation it’s often handy to change the client-side template delimeters used by Angular.js.

ngApp.config( [ '$interpolateProvider', function( $interpolateProvider ) {
    $interpolateProvider.startSymbol( '{!' );
    $interpolateProvider.endSymbol( '!}' );
} ] );

Where ngApp is the name of the angular.module you’re working with. Once you’ve done this you can use the following syntax for in your Angular templates:

{! myScopeVar !}

I hope this helps!

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 16 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.