使用 Angular 指令动态注入可运行 JavaScript

Question

我一整天都在尝试使用自定义 Angular 指令从 API 调用中动态加载带有 JavaScript 的脚本标签。我收到一个很大的错误，指出 JavaScript 代码字符串中的第一个字符是意外的。这是我的代码...

控制器：

var html = '<div id="donutchart" style="width: 200px; height: 200px;"></div>';
var javascript = 'google.load("visualization", "1", {packages:["corechart"]});google.setOnLoadCallback(drawChart); ' +
            'var drawChart = function() {' +
            'var data = google.visualization.arrayToDataTable(' +
            '[["Task", "Hours per Day"],["Work", 11],["Eat",2],["Commute",  2],["Watch TV", 2],["Sleep",    7]]);' +
            'var options = {title: "My Daily Activities",pieHole: 0.4};' +
            'var chart = new google.visualization.PieChart(document.getElementById("donutchart"))};' +
            'chart.draw(data, options)';

$scope.html = $sce.trustAsHtml(html);
$scope.javascript = $sce.trustAsJs(javascript);

HTML:

<bind-javascript html="{{html}}" javascript="{{javascript}}"></bind-javascript>

指令：

(function() {
var directive = function() {
    return {
        restrict: 'E',
        scope: {
            html: '@',
            javascript:'@'
        },
        replace: false,
        template: '<div class="binded-javascript" id="donutchart" ng-bind-html="html"></div>',
        link:function($scope, element, attr) {
            var script = angular.element(document.createElement('script'));
            var source = $sce.trustAsJs($scope.javascript);
            script.innerHTML = source;
            angular.element(document.getElementsByTagName('head')[0]).append(script);
        }
    };
};

angular.module('app')
    .directive('bindJavascript', directive);
}());

Answer 1

这个周末我真的弄明白了。我对指令做了正确的事情，但我最大的问题是在我的指令中它嵌套了一个 div 在 div 我试图用来创建 Google 图表，因此它没有渲染它。我还给 HTML 一个 id，因此一次无法呈现多个图表。这是我的解决方案：

控制器：

    var html = '<div style="width: 200px; height: 200px;"></div>';
    var javascript =
    '(function () {' +
    'var data = google.visualization.arrayToDataTable(' +
    '[["Task", "Hours per Day"],["Work", 11],["Eat",2],["Commute",  2], ["Watch TV", 2],["Sleep",    7]]);' +
    'var options = {title: "My Daily Activities",pieHole: 0.4};' +
    'var firstChild = document.getElementsByClassName("binded-javascript");' +
    'for(var x = 0; x < firstChild.length; x++) {' +
    'var chart = new google.visualization.PieChart(firstChild[x]);'+
    'chart.draw(data, options);' +
    '}' +
    '})();';

    $scope.html = html;
    $scope.javascript = javascript;

HTML:

<bind-javascript html="{{html}}" javascript="{{javascript}}"></bind-javascript>

指令：

(function() {
var directive = function($parse, $sce) {
    return {
        restrict: 'E',
        scope: {
            html: '@',
            javascript:'@'
        },
        replace: false,
        template: '<div class="binded-javascript"></div>' +
                            '<div ng-bind-html="trustedHTML"></div>',

        link:function($scope, element, attr) {
            $scope.trustedHTML = $sce.trustAsHtml($scope.html);
            var script = angular.element(document.createElement('script'));
            var source = $scope.javascript;
            script[0].text = source;
            angular.element(element).append(script[0]);
        }
    };
};

angular.module('cloud4wi')
    .directive('bindJavascript', directive);
})();

使用 Angular 指令动态注入可运行 JavaScript

Injecting runnable JavaScript dynamically with an Angular directive

javascript

angularjs

angularjs-directive