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

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

Mark Rajcok · Accepted Answer · 2013-01-16 18:03:32Z

14

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.

answered Jan 16, 2013 at 18:03

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Rajcok Over a year ago

@Liviu, since the directive doesn't change the myUsername value, one-way databinding ('@') seems more appropriate than two-way databinding ('='). Although using '=' is easier (no need to use {{}} in the HTML), using '@' makes it clear that the directive does not need to modify the value.

SunnyShah Over a year ago

@MarkRajcok, Excellent information in last comment, We would love to see some more like this be shared via blog or video tutorial. ;)

SunnyShah · Accepted Answer · 2013-01-16 12:42:55Z

10

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.

answered Jan 16, 2013 at 12:42

SunnyShah

30.6k30 gold badges97 silver badges139 bronze badges

2 Comments

Mark Rajcok Over a year ago

Since element is not used in the link function version of this directive (Liviu's answser), I agree that a compile function seems better.

Mark Rajcok Over a year ago

I just posted an answer that doesn't even need a compile function.

Wei Hao · Accepted Answer · 2013-06-26 06:58:55Z

9

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

edited Jun 26, 2013 at 6:58

Wei Hao

2,8669 gold badges29 silver badges40 bronze badges

answered Jan 16, 2013 at 12:30

Liviu T.

23.7k10 gold badges64 silver badges59 bronze badges

4 Comments

Liviu T. Over a year ago

stackoverflow.com/questions/12164138/…. Normally it's not an issue with 1:1 directive:html. ng-repeat and similar directives use the compile function to optimize.

SunnyShah Over a year ago

This answer includes explanation from Misko stackoverflow.com/a/14359666/148869

Mark Rajcok Over a year ago

@Liviu, what is the purpose of template: in the directive? Were you trying to see if you could generate the two versions of the output there (and found it didn't work and forgot to remove the code, maybe)? I'm curious to know if template: can take a function.

Liviu T. Over a year ago

@MarkRajcok actually I just modified the OP's solution to include the compile service, frankly I didn't see the other parameters :)

Collectives™ on Stack Overflow

How to make AngularJS compile the code generated by directive?

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related