CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
FlyingCat
FlyingCat

Reputation: 14250

How to add html content into my dom in my case?

I am trying to get my directive to work. The goal is to add bunch of html when user clicks a button.

I have something like

html

<a href='' test-product>click here</a>

JS

angular.module('myApp').directive('testProduct', ['$compile',
    function($compile) {
        return {
            restrict: 'A',
            link: function(scope, elem) {
                var include = '<div ng-include="test/product.html"></div>'

                elem.bind('click', function() {
                    elem.append($compile(include)(scope));
                })
            }
        };
    }
]);

product.html

<div>
   bunch of html here...
</div>

For some reason, it doesn't add the product html content as expected. Did I do something wrong here?

Thanks!

Upvotes: 0

Views: 40

Answers (1)

New Dev
New Dev

Reputation: 49590

The error is that ng-include expects a variable that contains a string.

The correct way is to do like so (notice the added quotes):

var include = '<div ng-include="\'test/product.html\'"></div>'

Side note: every time the element is clicked it would add the ng-include. Is this what you expect to happen?

Upvotes: 2

Related Questions