AngularJS: ng-include에 각부하 스크립트를 작성하는 방법

AngularJS: ng-include에 각부하 스크립트를 작성하는 방법

야, 나 앵귤러 웹페이지 만들고 있어.문제는 이미 앵글이 없는 것이 있는데 나도 포함시켜야 한다는 것이다.

문제는 이것입니다.

메인에는 이런 게 있어요.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 사용법은 알지만 네트워크 요청은 보이지 않습니다.내가 뭘 잘못하고 있지?

I knwangle은 대본 태그에 특별한 의미가 있습니다.덮어쓸 수 있나요?

1.2.0-rc1+(Github 문제)에서는 승인된 답변이 작동하지 않습니다.

다음은 내시경에서 만든 빠른 수정입니다.

/*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"partial로 게으르게 로드할 스크립트 입력:

<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에 삽입되지만 Javascript 경로는 로드되지 않습니다.로드하려고 했던 javascript가 다른 도메인/프로토콜에서 온 것이 원인이라고 생각합니다.그래서 저는 다른 접근방식을 취했고, 이것이 구글 지도를 예로 들면서 생각해낸 것입니다. (Gist)

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();
        }]
    }
});  

에서 동적으로 리캡카를 로드하려면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>

안타깝게도 이 게시물의 모든 답변이 나에게 효과가 없었습니다.계속 다음 오류가 발생했어요.

'문서'에서 '쓰기'를 실행하지 못했습니다.명시적으로 열지 않는 한 비동기식으로 로드된 외부 스크립트에서 문서에 쓸 수 없습니다.

외부 JavaScript 파일을 호출하고 HTML을 삽입하는 서드파티 위젯(내 경우 demandforce)을 사용하면 이러한 현상이 발생한다는 것을 알게 되었습니다.콘솔과 JavaScript 코드를 보면 다음과 같은 여러 줄이 나타납니다.

document.write("<script type='text/javascript' "..."'></script>");

https://github.com/krux/postscribe의 서드파티 JavaScript 파일(htmlParser.js 및 postsubscribe.html)을 사용했습니다.이것으로, 이 투고의 문제가 해결되는 것과 동시에, 상기의 에러도 수정되었습니다.

(지금 마감일이 촉박해서 이 방법은 빠르고 지저분했습니다.서드파티 JavaScript 라이브러리를 사용하는 것이 불편합니다.누군가 더 깨끗하고 좋은 방법을 생각해냈으면 좋겠다.)

Google reCAPTCHA를 명시적으로 사용해 보았습니다.다음은 예를 제시하겠습니다.

// put somewhere in your index.html
<script type="text/javascript">
var onloadCallback = function() {
  grecaptcha.render('your-recaptcha-element', {
    'sitekey' : '6Ldcfv8SAAAAAB1DwJTM6T7qcJhVqhqtss_HzS3z'
  });
};

//link function of Angularjs directive
link: function (scope, element, attrs) {
  ...
  var domElem = '<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>';
  $('#your-recaptcha-element').append($compile(domElem)(scope));
}

언급URL : https://stackoverflow.com/questions/12197880/angularjs-how-to-make-angular-load-script-inside-ng-include