角度でバックエンドデータを取得した後にHTMLでスクリプトをロード

Question

データベースからangleを介してHTMLを取得し、$ sce.trustAsHtmlでフロントエンドにバインドします。検索されたHTMLにいくつかのアクションを実行するスクリプトがあります。

角度コントローラ：ページのHTMLファイル内

$scope.Page= response.data; 
$scope.pageContent = $sce.trustAsHtml($scope.Page.Content); 

：

<div ng-bind-html="pageContent"> 

とページのHTMLファイル内にロードされたスクリプトファイルがあります：

<script src="scripts/script.js"></script> 

は、このスクリプトでなければなりません$scope.Page= response.dataの後に実行します。

document.addEventListener("DOMContentLoaded", function(event) { 
     setTimeout(function(){ 
     // script code 
    }, 2000); 
}); 

そして、それは動作しますが、ページのHTMLファイルがロードされた後、スクリプトファイルは、しかし、すぐにロードされ、それだけで「スクリプトコードを」タイムアウト：私が試した何

が使用することです。私は検索するまでスクリプトの読み込みを延期したい$scope.Page= response.data; $ scope.Pageが利用可能になった後、読み込むために要素に使用する角度指示や何かがありますか他の解決策がありますか？手動<script>要素を作成し、HTMLコンテンツがバインドされた後に所望のURLにそのsrc属性を設定することができます

Answer 1

：あなたのケースでは

var tag = document.createElement('script'), 
    firstScript = document.getElementsByTagName('script')[0]; 

tag.src = 'scripts/script.js'; 
firstScript.parentNode.insertBefore(tag, firstScript); 

Answer 2

を、私は、CDNにおけるスクリプトの内容を保存するためにあなたをお勧めしますそれ以外の場合は$ templateCacheのapplicationに保存することができます。より良い理解のために、以下のサンプルをチェックしてください。

function sampleController($scope, $templateCache) { 
 
    
 
    //templateCache will store the template/script 
 
    $templateCache.put('myScript', 'alert("hi")'); 
 

 
    //function to execute at a point of time 
 
    $scope.executeScript = function() { 
 
    var scriptContent = $templateCache.get('myScript'); 
 
    var script = document.createElement('script'); 
 
    script.type = 'text/javascript'; 
 
    script.textContent = scriptContent; 
 
    document.head.appendChild(script); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-controller="sampleController" ng-app> 
 
    <button ng-click="executeScript()">Execute Script</button> 
 

 
</div>