inline javascript within angular directive template url

Question

I'm trying to embed the dalliance genome browser into an Angular application. It works fine when placed on the main page. However, because the app is large, I am trying to use a Template-expanding directive. I read some posts about inline javascript not playing well along Angular, and the solution. In particular I added this gist to my app.

My app now looks like this plunker.

Question: The genome browser plugin does not appear :-( What's wrong?

app.js:

(function(angular) {
    'use strict';
    angular.module('docsTemplateUrlDirective', [])
        .controller('Controller', ['$scope', function($scope) {
            $scope.title = "Genome Browser";
        }])
        .directive('genomeBrowser', function() {
            return {
                templateUrl: 'genomeBrowser.html'
            };
        });
})(window.angular);

genomeBrowser.html:

<h2>Embedded page:</h2>
<script type='text/javascript-lazy' language="javascript">
    new Browser(options);
</script>
<div id="svgHolder"></div>

(The options are not relevant here but can be seen in the plunker.)

index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Genome browser</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
    <script src="angular-loadscript.js"></script>
    <script src="http://www.biodalliance.org/release-0.13/dalliance-compiled.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
    <div ng-controller="Controller">
        <h1>{{title}}</h1>
        <div genome-browser></div>
    </div>
</body>
</html>

score 1 · Accepted Answer · answered Aug 27 '15 at 08:34

1

You forgot to include 'ngLoadScript' as a dependency:

angular.module('docsTemplateUrlDirective', [])

should be

angular.module('docsTemplateUrlDirective', ['ngLoadScript'])

Also, there was a missing quote in your partial in console.log('debug');

answered Aug 27 '15 at 08:34

Kretep

514
2
4
12

Nice catch! I'll accept yours since it answers the question, but work with the other answer where the code is moved into the directive. – Hugues Fontenelle Aug 27 '15 at 09:34

score 0 · Answer 2 · answered Aug 27 '15 at 08:21

To solve this, I moved all inline javascript into the directive.

app.js:

(function() {
    'use strict';
    angular.module('app', []);

    angular.module('app').controller('mainCtrl', ['$scope', function($scope) {
        $scope.title = "Genome Browser";
    }]);

    angular.module('app').directive('genomeBrowser', function() {
        return {
            templateUrl: 'genomeBrowser.html',
            restrict: 'E',
            controller: function($scope) {
                var browser = new Browser({
                    pageName: 'dalliance', // Target element ID.

                    chr: '22',
                    viewStart: 30000000,
                    viewEnd: 30030000,
                    cookieKey: 'human',

                    coordSystem: {
                        speciesName: 'Human',
                        taxon: 9606,
                        auth: 'NCBI',
                        version: '36',
                        ucscName: 'hg18'
                    },

                    sources: [{
                        name: 'Genome',
                        uri: 'http://www.derkholm.net:8080/das/hg18comp/',
                        tier_type: 'sequence',
                        provides_entrypoints: true
                    }, {
                        name: 'Genes',
                        desc: 'Gene structures from Ensembl 54',
                        uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
                        collapseSuperGroups: true,
                        provides_karyotype: true,
                        provides_search: true
                    }, {
                        name: 'Repeats',
                        uri: 'http://www.derkholm.net:8080/das/hsa_54_36p/',
                        stylesheet_uri: 'http://www.derkholm.net/dalliance-test/stylesheets/ens-repeats.xml'
                    }, {
                        name: 'MeDIP raw',
                        uri: 'http://www.derkholm.net:8080/das/medipseq_reads'
                    }, {
                        name: 'MeDIP-seq',
                        uri: 'http://www.ebi.ac.uk/das-srv/genomicdas/das/batman_seq_SP/'
                    }]
                });
            }
        };
    });
})();

genomeBrowser.html:

<div id="dalliance"></div>

I still have things to learn about how to properly control this browser my for next homework, but this answers the question.

Plunk: http://plnkr.co/edit/KSUVq8?p=preview

inline javascript within angular directive template url

2 Answers2