How to force AngularJS to compile the code generated by the directive?

Question

Please help me, how can we get AngularJS to compile the code generated by the directive?

You can even find the same code here, http://jsbin.com/obuqip/4/edit

HTML

<div ng-controller="myController"> {{names[0]}} {{names[1]}} <br/> <hello-world my-username="names[0]"></hello-world> <br/> <hello-world my-username="names[1]"></hello-world> <br/><button ng-click="clicked()">Click Me</button> </div> 

Javascript

 var components= angular.module('components', []); components.controller("myController", function ($scope) { var counter = 1; $scope.names = ["Number0","lorem","Epsum"]; $scope.clicked = function() { $scope.names[0] = "Number" + counter++; }; } ); // **Here is the directive code** components.directive('helloWorld', function() { var directiveObj = { link:function(scope, element, attrs) { var strTemplate, strUserT = attrs.myUsername || ""; console.log(strUserT); if(strUserT) { strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ; } else { strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; } element.replaceWith(strTemplate); }, restrict: 'E' }; return directiveObj; }); 

Answer 1

Here's a version that doesn't use a compilation function, and a link function:

 myApp.directive('helloWorld', function () { return { restrict: 'E', replace: true, scope: { myUsername: '@' }, template: '<span><div ng-show="myUsername">Hello {{myUsername}}</div>' + '<div ng-hide="myUsername">Sorry, No user to greet!</div></span>', }; }); 

Note that the template is wrapped in <span> because there must be one root element for the template. (Without span> it will have two <div> root elements.)

HTML needs to be slightly modified to interpolate:

 <hello-world my-username="{{names[0]}}"></hello-world> 

Fiddle

Answer 2

Code: http://jsbin.com/obuqip/9/edit

 components.directive('helloWorld', function() { var directiveObj = { compile:function(element, attrs) { var strTemplate, strUserT = attrs.myUsername || ""; console.log(strUserT); if(strUserT) { strTemplate = "<DIV> Hello " + "{{" + strUserT +"}} </DIV>" ; } else { strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; } element.replaceWith(strTemplate); }, restrict: 'E' }; return directiveObj; }); 

Explanation: The same code should be used in the compilation function, and not for binding the function. AngularJS compiles the generated content of the compilation function.

Answer 3

You need to create an angular element from the template and use the $ compile service

jsBin

 components.directive('helloWorld', ['$compile', function(compile) { var directiveObj = { link: function(scope, element, attrs) { var strTemplate, strUserT = attrs.myUsername || ""; console.log(strUserT); if (strUserT) { strTemplate = "<DIV> Hello" + "{{" + strUserT +"}} </DIV>" ; } else { strTemplate = "<DIV>Sorry, No user to greet!</DIV>" ; } var e = angular.element(strTemplate); compile(e.contents())(scope); element.replaceWith(e); }, template: function() { console.log(args); return "Hello"; }, restrict: 'E' }; return directiveObj; }]);