JavaScript/AngularJS : How do i declare directive from from javascript?

Question

I need to declare my html tag(angular directive) as below in javascript. How do i do with correct js syntax.

$scope.myList =[ {title='Angular1' content='<div angular-one></div>'},

                 {title='Angular2' content='<div angular-two></div>'}];

I will bind this value back to html later. I just want to know how do declare above angular-one and angular-two directives inside the div tag using javascript.

in the html, i will call the passed value from javascript and bind the directive in the html.

{{content}}

my directive get displayed as string like instead of binding as html.

can you explain what are you exactly trying to achieve? do you want to create a direct? — S4beR
– S4beR, Commented Apr 6, 2016 at 22:47
I am still not sure what are you trying to do. can you share some example on jsfiddle or plnkr or any other place — S4beR
– S4beR, Commented Apr 6, 2016 at 23:10

scyrizales · Accepted Answer · 2016-04-06 23:34:38Z

It's pretty simple, all what you need it's to create a simple directive to compile the html (using the $compile service from angular):

.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}])

You can see a working example here: https://jsfiddle.net/scyrizales/zu2osuzb/

Collectives™ on Stack Overflow

JavaScript/AngularJS : How do i declare directive from from javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related