How to render double curly braces in directive template?

Question

I'm working on a back end validation integration with AngularJS. I need to display an error message right beside the control. The error message comes from back end. And the control is rendered by a directive template. I tried putting a span for an error message along with the control in the template, but I ran into an embarrassing situation.

Here's the code:

var myDirective = angular.module('myDirective', []);
myDirective.directive("textquestion", function() {
    return {
        template: '<input id="{{questionNumber}}" name="{{questionNumber}}" type="text" /><span ng-show="errors[{{questionNumber}}]">{{error[questionNumber]}}</span>',
        restrict: 'A',
        scope: {
            questionNumber: 'questionNumber'
        }
    };
})

As you can see, I want to render {{errors['1001']}} in html, with '1001' being the actual questionNumber, so the error message can be binded. But in current code, since errors['1001'] is empty at the time of rendering, this part will render nothing in html.

Can anyone help me with how to render actual {{errors['1001']}} in html? Or is there any better way to do this? Please keep in mind that the control is dynamically generated, so the questionNumber needs to be dynamic. And this error message comes from back end, so the binding needs to happen after the rendering.

Thank you！

Answer 1

You don't need the {{}} in your ng-show . What you pass into ng-show is already an expression

<span ng-show="errors[questionNumber]">{{errors[questionNumber]}}</span>