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中？

1 个答案: