手动编译插值答案

【问题标题】：Compiling interpolation manually手动编译插值
【发布时间】：2018-04-19 12:00:20
【问题描述】：

我有一个自定义指令并使用 ng-repeat 呈现该指令。我需要的是在传递到我的自定义指令之前编译插值。

在下面找到 plnkr

https://plnkr.co/edit/bjdBSKCFPhgbE2aREupy?p=preview

这里我想使用 mycompile 指令在这段代码<display-id mycompile id={{op.id}}> </display-id> 中编译插值。

    app.directive('mycompile', function ($compile, $interpolate) {
        return {

            restrict: 'EA',
            replace: true,
            compile: function ($scope, $elm, $attrs) {
                return {
                    pre: function ($scope, $elm, $attrs) {

                            $interpolate($elm[0])($scope);

                    }
                }
            }

        }
    })

【问题讨论】：

您为什么不简单地使用范围绑定？为什么要插入元素，而不是 id 属性的值？你真正想达到什么目标？

标签： angularjs angularjs-ng-repeat angularjs-interpolate custom-directive

【解决方案1】：

$interpolateProvider 期望字符串作为参数，因此您需要将元素转换为字符串，然后根据需要转换回 DOM 元素，可以使用outerHTML 属性来实现，如下所示：

$interpolate($elm.prop('outerHTML'))($scope);

【讨论】：