Injecting runnable JavaScript dynamically with an Angular directive

Issue

I've been trying all day to dynamically load a script tag with JavaScript in it from an API call with a custom Angular directive. I'm getting a big error that says the first character in the string of JavaScript code is unexpected. Here is my code...

Controller:

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>

Directive:

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

Solution

I actually figured it out this weekend. I was doing the right thing with the directive, but my biggest problem was that in my directive it was nesting a div inside of the div I was trying to use to create the Google Chart, therefore it wasn't rendering it. I also was giving the HTML an id and therefore would not be able to render more than one chart at a time. Here is my solution:

Controller:

    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>

Directive:

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

Answered By - tcase360