안녕하세요 저는 각도로 웹 페이지를 만들고 있습니다. 문제는 이미 앵귤러없이 구축 된 무언가가 있고 그것들도 포함시켜야한다는 것입니다.
문제는 이것입니다.
내 main.html에 다음과 같은 것이 있습니다.
<ngInclude src="partial.html">
</ngInclude>
그리고 내 partial.html은 다음과 같습니다.
<h2> heading 1 <h2>
<script type="text/javascript" src="static/js/partial.js">
</script>
그리고 내 partial.js는 angularjs와 관련이 없습니다. nginclude가 작동하고 html을 볼 수 있지만 javascript 파일이 전혀로드되지는 않습니다. firebug / chrome-dev-tool을 사용하는 방법을 알고 있지만 네트워크 요청이 생성되는 것을 볼 수 없습니다. 내가 도대체 뭘 잘못하고있는 겁니까?
나는 각도가 스크립트 태그에 특별한 의미를 가지고 있습니다. 재정의 할 수 있습니까?
답변
허용되는 답변은 1.2.0-rc1 + ( Github 문제 ) 에서 작동하지 않습니다 .
endorama가 만든 빠른 수정은 다음과 같습니다 .
/*global angular */
(function (ng) {
'use strict';
var app = ng.module('ngLoadScript', []);
app.directive('script', function() {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attr) {
if (attr.type === 'text/javascript-lazy') {
var code = elem.text();
var f = new Function(code);
f();
}
}
};
});
}(angular));
이 파일을 추가하고 ngLoadScript모듈을 애플리케이션 종속성 type="text/javascript-lazy"으로로드하고 부분적으로 느리게로드 할 스크립트 유형으로 사용하십시오 .
<script type="text/javascript-lazy">
console.log("It works!");
</script>
답변
짧은 대답 : AngularJS ( “jqlite”)는 이것을 지원하지 않습니다. 페이지에 jQuery를 포함하면 (Angular를 포함하기 전에) 작동합니다. 참조 https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion를
답변
나는 neemzy의 접근 방식을 시도했지만 1.2.0-rc.3을 사용하여 작동하지 않았습니다. 스크립트 태그는 DOM에 삽입되지만 자바 스크립트 경로는로드되지 않습니다. 로드하려는 자바 스크립트가 다른 도메인 / 프로토콜에서 왔기 때문이라고 생각합니다. 그래서 저는 다른 접근 방식을 취했고, 이것이 구글지도를 예로 들어 제가 생각해 낸 것입니다. ( 요점 )
angular.module('testApp', []).
directive('lazyLoad', ['$window', '$q', function ($window, $q) {
function load_script() {
var s = document.createElement('script'); // use global document since Angular's $document is weak
s.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
document.body.appendChild(s);
}
function lazyLoadApi(key) {
var deferred = $q.defer();
$window.initialize = function () {
deferred.resolve();
};
// thanks to Emil Stenström: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
if ($window.attachEvent) {
$window.attachEvent('onload', load_script);
} else {
$window.addEventListener('load', load_script, false);
}
return deferred.promise;
}
return {
restrict: 'E',
link: function (scope, element, attrs) { // function content is optional
// in this example, it shows how and when the promises are resolved
if ($window.google && $window.google.maps) {
console.log('gmaps already loaded');
} else {
lazyLoadApi().then(function () {
console.log('promise resolved');
if ($window.google && $window.google.maps) {
console.log('gmaps loaded');
} else {
console.log('gmaps not loaded');
}
}, function () {
console.log('promise rejected');
});
}
}
};
}]);
누군가에게 도움이되기를 바랍니다.
답변
이 방법을 사용하여 스크립트 파일을 동적으로로드했습니다 (컨트롤러 내부).
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);
답변
1.2.0-rc1에서는 더 이상 작동하지 않습니다. 이에 대한 자세한 내용은 이 문제 를 참조하십시오 . 여기에 빠른 해결 방법을 설명하는 댓글이 게시되었습니다. 여기에서도 공유하겠습니다.
// Quick fix : replace the script tag you want to load by a <div load-script></div>.
// Then write a loadScript directive that creates your script tag and appends it to your div.
// Took me one minute.
// This means that in your view, instead of :
<script src="/path/to/my/file.js"></script>
// You'll have :
<div ng-load-script></div>
// And then write a directive like :
angular.module('myModule', []).directive('loadScript', [function() {
return function(scope, element, attrs) {
angular.element('<script src="/path/to/my/file.js"></script>').appendTo(element);
}
}]);
최고의 솔루션은 아니지만 후속 뷰에 스크립트 태그를 넣는 것도 아닙니다. 제 경우에는 Facebook / Twitter 등을 사용하기 위해 이렇게해야합니다. 위젯.
답변
ocLazyLoad 는 라우터 (예 : ui-router)를 통해 템플릿 /보기에서 스크립트를 느리게로드 할 수 있습니다. 여기 스니 플릿이 있습니다
$stateProvider.state('parent', {
url: "/",
resolve: {
loadMyService: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('js/ServiceTest.js');
}]
}
})
.state('parent.child', {
resolve: {
test: ['loadMyService', '$ServiceTest', function(loadMyService, $ServiceTest) {
// you can use your service
$ServiceTest.doSomething();
}]
}
});
답변
에서 recaptcha를 동적으로로드하려면 ui-view다음 방법을 사용합니다.
에서 application.js:
.directive('script', function($parse, $rootScope, $compile) {
return {
restrict: 'E',
terminal: true,
link: function(scope, element, attr) {
if (attr.ngSrc) {
var domElem = '<script src="'+attr.ngSrc+'" async defer></script>';
$(element).append($compile(domElem)(scope));
}
}
};
});
에서 myPartial.client.view.html:
<script type="application/javascript" ng-src="http://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded"></script>
