从angular.js 1

Question

所以我的问题非常棘手且非常规，但我找不到任何解决方法。 我使用了kEditor，这是一个非常强大的插件，可以通过拖放来构建模板。该插件是在jquery中构建的。所以我创建了使用Keditor函数的指令。

我正在使用这个插件，因为它是开源的，我可以在互联网上找到最好的。

我改变了很多编码。它在侧栏中仅提供两个选项卡，如以下链接： https://rawgit.com/Kademi/keditor/master/examples/callbacks.html

但在我的情况下，我正在尝试使用这个强大的工具建立发票。 我创建了一些html，我需要将其插入到第三个标签中：

在我的控制器中，我正在准备html：

app.controller('mainCtrl', ['$scope', '$compile', 'loaderService', function ($scope, $compile, loaderService) {

    $scope.init = function () {
        loaderService.getJSON().then(function (callBack) {
            $scope.invoice = callBack.data.invoice;
        });
    }

    $scope.templateIntegration = function () {

        var template = '<div data-classification="invoice" data-type="component-{{invoice.invoiceNo.type}}" data-title="{{invoice.invoiceNo.label}}" data-length="{{invoice.invoiceNo.length}}" data-default-mask="{{invoice.invoiceNo.defaultMask}}" data-categories="Text;Dynamic component">' +
                        '<p>{{invoice.invoiceNo.value}}</p>' +
                        '</div>';

        template += '<div data-classification="invoice" data-type="component-{{invoice.invoiceDate.type}}" data-title="{{invoice.invoiceNo.label}}" data-default-mask="{{invoice.invoiceNo.label}}" data-categories="Text;Dynamic component">' +
                    '<p>{{invoice.invoiceDate.value}}</p>' +
                    '</div>';

        template += '<div data-classification="invoice" data-type="component-{{invoice.invoiceStatus.type}}" data-title="{{invoice.invoiceStatus.label}}" data-length="{{invoice.invoiceStatus.length}}" data-categories="Text;Dynamic component">' +
                    '<p>{{invoice.invoiceStatus.value}}</p>' +
                    '</div>';

        template += '<div data-classification="invoice" data-type="component-{{invoice.customer.name.type}}" data-title="{{invoice.customer.name.label}}" data-length="{{invoice.customer.name.length}}" data-categories="Text;Dynamic component">' +
            '<p>{{invoice.customer.name.value}}</p>' +
        '</div>';

        template += '<div data-classification="invoice" data-type="component-{{invoice.customer.address.type}}" data-title="{{invoice.customer.address.label }}" data-length="{{invoice.customer.address.length}}" data-categories="Text;Dynamic component">' +
            '<p>{{invoice.customer.address.value}}</p>' +
        '</div>';

        template += '<div data-classification="invoice" data-type="component-{{invoice.items.type}}" data-title="{{invoice.items.label }}" data-categories="Text;Dynamic component">' +
                    '<table class="table-striped table-responsive">' +
                    '<thead>' +
                        '<tr>' +
                        '<th>Name</th>' +
                        '<th>Price</th>' +
                        '<th>Tax</th>' +
                        '<th>Quantity</th>' +
                        '<th>Subtotal</th>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody>' +
                    '<tr ng-repeat="x in invoice.items.value">' +
                        '<td>{{x.name}}</td>' +
                        '<td>{{x.price}}</td>' +
                        '<td>{{x.tax}}</td>' +
                        '<td>{{x.quantity}}</td>' +
                        '<td>{{ (x.price + x.tax) * x.quantity }}</td>' +
                    '</tr>' +
                    '</tbody>' +
                    '</table>' +
                    '</div>';

        //$compile()($scope)
        return template;
    }
}

这是我的指示：

app.directive('headerKEditor', function () {
    return {
        link: function (scope, elem, attr) {
            elem.keditor({
                isHeader: true,
                invoiceTemplate: scope.templateIntegration()
            });
        }
    }
});

以下是该指令的使用方法：

<div id="wrapper">
                    <h3>Repeating Header on Each Page</h3>
                    <div class="invoice-container" header-k-editor></div>
                </div>

当我在预加载的html中使用此html时，它只显示{{}}个大括号而没有值。我知道我迟到在控制器中使用该模型。但是可以做些什么呢？我使用了$ compile，但它不适用于带有ng-repeat的表。