0
저는 DOM이 각도 세계의 외부에 동적으로 추가되는 어플리케이션을 구축하고 있습니다. jQuery와 그 javascript도 동적으로로드됩니다. angular.injector 메소드에서 $ compile을 얻었고 scope도 컴파일 한 다음 $ compile 서비스를 사용했습니다. 하지만이 모든 것들로 내 지시어와 컨트롤러는 작동하지 않습니다. 내 앱에 추가 된 것을 볼 수 있지만 여전히 컨트롤러가 시작되지 않습니다. 내가 index.html을에 direc.js를 추가하는 경우동적으로로드 된 각도의 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는 모든
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의 일부로 추가 된 스크립트의 동적로드가 아니라 제대로 작동합니다.
샘플 응용 프로그램 : 당신 로딩이 완료되고 당신의 DOM이 angular.bootstrap(document, ['myApp']);
는 bootstraping angular 절 "수동 초기화"모든 일반적으로
를 참조 준비 후 코드에 각 응용 프로그램을 부트 스트랩 https://plnkr.co/edit/gekifqGzJDAsWs5OF4ro