角度指令模板中的inline javascript

我試圖將dalliance genome browser嵌入到Angular應用程序中。它放在主頁面上時工作正常。但是，由於該應用程序很大，我正嘗試使用Template-expanding directive。我看了一些關於內聯javascript在Angular上玩的不好的帖子，以及solution。特別是我將這個gist添加到我的應用程序。角度指令模板中的inline javascript

我的應用現在看起來像這樣plunker。

問：基因組瀏覽器插件不不 :-(出現了什麼問題

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>

（在options不是與此有關，但可以在plunker可以看到。）

的index.html：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Genome browser</title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" 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>

來源

2015-08-26 Hugues Fontenelle

你忘了包括 'ngLoadScript' 作爲一個依賴：

angular.module('docsTemplateUrlDirective', [])

應該

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

而且，在你的部分缺失的報價在console.log('debug');

來源

2015-08-27 08:34:59 Kretep

好的！我會接受你的答案，因爲它回答了問題，但在代碼移入指令的其他答案中工作。 –

爲了解決這個問題，我感動了所有內嵌的JavaScript到指令。

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>

我還有事，以瞭解如何正確控制這個瀏覽器我明年的功課，但是這回答了這個問題。

普拉克：http://plnkr.co/edit/KSUVq8?p=preview

來源

2015-08-27 08:21:51

角度指令模板中的inline javascript

回答

相關問題