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

Question

我有一个来自数据库的指令。类似于简码在 Wordpress 中的工作方式，用户需要能够在这里和那里插入这些自定义画廊。我已经尝试了好几种方法。它们可以编译，但不会影响页面上的 HTML。我错过了什么？

从数据库传入：

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

我想将该 DIV 替换为带有模板的“work-gallery”属性。当我将该内容加载到我的页面范围内时，我会对其进行编译，以便触发我的指令。

来自控制器

$compile($scope.page.content)($scope);

这会触发指令，它会直接编译到需要附加或替换它的位置，然后就不会出现在前端。如果我在动态加载的内容之外添加该 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());
            });
        }
    };
});

如果我深入到 innerText，检查“元素”会显示 TEST2，但这就是我得到的全部。任何帮助表示赞赏！据我了解，这应该在我的内容中添加“TEST2”。

预期输出

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

感谢任何帮助！

Answer 1

我觉得看属性有问题，试试：

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