Javascript 从数据库加载的AngularJS指令不会替换为模板

我有一条来自数据库的指令。与Wordpress中的短代码工作原理类似，用户需要能够在此处或此处插入这些自定义库。我试过好几种方法。它们可以编译，但不会影响页面上的HTML。我错过了什么

从数据库传入：

<p>Lorem Ipsum. Some content here</p>
<div work-gallery friendly="bq"></div>

这会触发指令，它会编译到需要附加或替换它的位置，然后就不会显示在前端。如果我将该DIV添加到动态加载的内容之外，它就会工作

指令

app.directive('workGallery', function ($compile) {
    var template = '<div>TEST{{page.med.length}}</div>';

    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            scope.page.med = [1, 2];
            scope.$watch(attrs.friendly, function () {
                ele.html(template);
                $compile(ele.contents())(scope);
                console.log(ele);
                ele.append(ele.contents());
            });
        }
    };
});

app.directive（'workGallery'，函数（$compile）{
var模板='TEST{{page.med.length}}'；
返回{
限制：“A”，
替换：正确，
链接：功能（范围、元素、属性）{
scope.page.med=[1,2]；
范围：$watch（属性友好，函数（）{
html（模板）；
$compile（ele.contents（））（范围）；
控制台日志（ele）；
ele.append（ele.contents（））；
});
}
};
});

如果我深入到innerText，检查“element”就会发现TEST2，但这就是我得到的全部。感谢您的帮助！据我所知，这应该在我的内容中添加“TEST2”

预期产出

<p>Lorem Ipsum. Some content here</p>
<div work-gallery friendly="bq">TEST2</div>

Lorem Ipsum。这里有一些内容

测试2

---

感谢您的帮助

我认为查看属性有问题，请尝试：

attrs.$observe('friendly', function(val){
    /* .... */ 
});

---

我同意，这是基于另一个演示的。由于数据没有花费或替换原始DIV，这仍然没有帮助。不过，感谢您的输入！

attrs.$observe('friendly', function(val){
    /* .... */ 
});