Question

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

从数据库传入：

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

我想用＆＃34;工作库＆＃34;替换那个DIV。带有模板的属性。当我将该内容加载到我的页面范围内时，我编译它以便我的指令触发。

来自控制器

$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());
            });
        }
    };
});

检查＆＃34;元素＆＃34;如果我深入到innerText，我会发现TEST2，但这就是我所得到的。任何帮助表示赞赏！根据我的理解，这应该添加＆＃34; TEST2＆＃34;在我的内容中。

预期输出

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

感谢任何帮助！

Answer 1

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

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

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

1 个答案: