0
私のDOMが角度の世界の外側に動的に追加されるアプリケーションを構築しています。 jQueryとそのためのjavascriptも動的に読み込まれます。私はangular.injectorメソッドとスコープから$ compileを取得し、$ compileサービスを使用しました。しかし、これで私の指示とコントローラは実行されません。私はそれらが私のアプリに追加されているのを見るが、コントローラはまだ起動していない。動的にロードされた角度のjavascriptが動作しない
のindex.htmlが
<html>
<head>
<script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="test">
<div id="main">
</div>
</div>
<!--<script src="https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js"></script>-->
</body>
</html>
script.js
//Create angular module
angular.module("test",[]);
$(document).ready(function(){
//Load dynamically the JS
$.getScript('https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js', function(){
angular.element($("#main")[0]).scope().$root.$apply();
});
var scrip = "<script src=\"https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js\"></script>"
var htmlStr = "<span test-drective=\"test-drective\">Test</span>";
$("#main").append(angular.element('*[ng-app]').injector().get("$compile")(htmlStr)(angular.element($("#main")[0]).scope().$new(true)));
})
とdirec.js私はindex.htmlの中direc.jsを追加する場合は、すべて、
angular.module("test")
.directive("testDrective", function(){
return {
restrict: 'A',
controller: function($scope) {
console.log("Controller")
},
link: function(scope, elem, attrs) {
console.log("link")
}
};
})
ですjqueryを使ったスクリプトの動的ロードやDOMの一部として追加されたものではうまく動作しません。
サンプルアプリ： https://plnkr.co/edit/gekifqGzJDAsWs5OF4ro