AngularJs: How to create a directive to replace innerText - php

Question

I am working in a project(online exam, a single page application) using PHP+MySQL+AngularJs which has one very important section i.e. "Add Question". Let us take as a example:
$simple_question = "A train running at the speed of 60 km/hr crosses a pole in 9 seconds. What is the length of the train?";
$programmimg_question = "[code]#include int main(int argc, char **argv) { printf("%c\n", **++argv); return 0; }[/code]";
So you can see that, I am adding [code]....[/code] whenever programming language question is getting inserted so that I can prettify the code while showing the question. I am using twitter bootstrap which has <code> tag to show code between them. So I want to create a directive which will replace the [code] to <code> and render as a HTML in the view.
here is my code in HTML
<div class="question-container">
<code-highlighter> {{questionData.question}} </code-highlighter>
</div>
directive code(which is not working):
app.directive('codeHighlighter', function ($compile) {
return {
restrict: 'E',
scope: {
questions: "="
},
link: function (scope, element, attrs) {
var html = element[0].outerHTML;
var hasCodeElement = false;
if(html.indexOf('[code]')!=-1) hasCodeElement = true;
if(hasCodeElement) html = '<code>'+html+'</code>';
var e = $compile(html)(scope);
element.replaceWith(e);
}
};
})
I am pretty new for creating a directive in angularjs, please give me some resource or link to achieve the above problem, Please help me to out of it.
Thanks, In advance.

Answer 1

You don't need to $compile anything. Just set the elements HTML based on the assigned question-text, optionally replacing [code]...[/code] with <code>...</code>.
You can do it like this:
app.directive('question', function () {
return {
restrict: 'E',
scope: {
text: '='
},
link: function questionPostLink(scope, elem, attrs) {
var html = scope.text.replace(
/\[code\](.*?)\[\/code\]/g,
'<code>$1</code>');
elem.html(html);
}
};
});
Then you can use it like this:
$scope.questions = [
'This is a simple questions (without any [code]).',
'[code]var str = \'This is a programming question.\';[/code]'
];
<question text="txt" ng-repeat="txt in questions"></question>
See, also, this short demo.
UPDATE:
In order to be able to render HTML elements inside [code]...[/code] as is, use the following linking function:
link: function questionPostLink(scope, elem, attrs) {
// Here, I assume that programming questions
// always begin with [code] and end with [/code]
var isProgramming = progRE.test(scope.text);
if (!isProgramming) {
var html = scope.text;
elem.html(html);
} else {
var text = scope.text.replace(progRE, '$1');
elem.html('<code></code>');
elem.children().text(text);
}
}
See, also, this updated demo.