How to make AngularJS compile the code generated by directive?

Question

Please help me on, How can we make AngularJS compile the code generated by directive ?

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

<

Answer 1

Here's a version that doesn't use a compile function nor 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 a <span> because a template needs to have one root element. (Without the <span>, it would have two <div> root elements.)

The HTML needs to be modified slightly, to interpolate:

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

Fiddle.

Answer 2

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;
}]);

Answer 3

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 compile function rather than linking function. AngularJS does compile the generated content of compile function.