javascript - 在我的例子中，如何将 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));
                })
            }
        };
    }
]);

产品.html

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

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

谢谢!

Answer 1

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

正确的方法是这样做(注意添加的引号):

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

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