如何将 html 内容添加到我的 dom 中？

Question

我正在努力让我的指令生效。目标是在用户单击按钮时添加一堆 html。

我有类似的东西

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>

出于某种原因，它没有按预期添加产品 html 内容。我在这里做错了什么吗？

谢谢！

Answer 1

错误是 ng-include 需要一个包含字符串的变量。

正确的做法是这样做（注意添加的引号）：

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

旁注： 每次单击元素时都会添加 ng-include。这是您期望发生的事情吗？

如何将 html 内容添加到我的 dom 中？

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

javascript

angularjs

angularjs-directive