angularjs - 使用 PhantomJS 创建 PDF 和 HTML 输出并评估 Angular 指令以包含在 HTMl 和 PDF 输出中

Question

我正在尝试在 HTML 中附加一个角度指令，以便 PhantomJS 创建 HTML 和 PDF 输出。

片段如下：

我试图附加 Angular 指令的代码如下：

function drawWidget(widgets) {
 for(var i = 0; i < widgets.length; i++) {
    var iDiv = document.createElement('div');
    var att = document.createAttribute("data-ss-colspan");
    iDiv.className = "widget_box";
    iDiv.id = "graphId" + i;
    iDiv.innerHTML = '<div class="col-md-12 col-sm-12 head_categories">\
                        <span>' + widgets[i]["widgetTitle"] + '</span>\
                        <span class="pull-right menu_categori"></span>\
                     </div>\
                     <div style="clear:both;"></div>';
    att.value = widgets[i]["widgetSize"].toString();                                        // Set the value of the class attribute
    iDiv.setAttributeNode(att); 
    document.getElementById('widget_container').appendChild(iDiv);
    //var chartDiv = document.createElement('editor');
       document.getElementById(iDiv.id).append(angular.element('#widget_container').
                    scope().getChartElement(widgets, i));
 }
}

我的 Angular 指令似乎如下所示：

angular.module('app',[]).directive("editor", function(){
  return {
    require: "?ngModel",
    scope: true,
    controller: 'ChartController',
    template: "<input ng-model='value' ng-change='onChange()'>",
    link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return;
        scope.onChange = function(){
            ngModel.$setViewValue(scope.value);
        };

        ngModel.$render = function(){
            scope.value = ngModel.$modelValue;
        };
    }
};
});

获取 ChartElement 代码如下：

(function(){

'use strict'

angular.module('app').controller('ChartController', chartController);

chartController.$inject = ['$scope', '$compile'];

function chartController($scope, $compile) {

    $scope.getChartElement = function(widgets, i) {
        $scope.id = "graphId" + i;
        $scope.data = widgets[i]["chart_data"]["data"];

        /*var elementString ='<line-graph graph-id="id" graph-data="data" ' + ' width="' + widgets[i]["chart_data"]["divWidth"] + '" height="' + widgets[i]["chart_height"] +
             '" colors="' + widgets[i]["chart_data"]["colors"] + 
             '" interval="' + widgets[i]["chart_data"]["interval"] + '"></line-graph>';*/
        var elementString ='<editor ng-model="abc" minlength="3"></editor>';
        console.log("Element String : " + elementString);
        return elementString;
    };
};


})();