Question

嘿我正在构建一个有角度的网页。问题是有些东西已经没有角度而已经构建了，我也必须包括它们

问题在于此。

我的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，但我甚至看不到网络请求。我做错了什么？

我knwo angular对脚本标记有一些特殊含义。我可以覆盖它吗？

Answer 1

接受的答案不适用于1.2.0-rc1 +（Github issue）。

以下是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>

Answer 2

简短回答：AngularJS（“jqlite”）不支持此功能。在您的页面上包含jQuery（包括Angular之前），它应该可以工作。见https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion

Answer 3

我尝试过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');
                    });
                }
            }
        };
    }]);

我希望这对某人有帮助。

Answer 4

这将不再适用于1.2.0-rc1。有关详细信息，请参阅this issue，其中我发布了一条描述快速解决方法的评论。我也会在这里分享一下：

// 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 /等。窗口小部件。

Answer 5

我使用此方法动态加载脚本文件（在控制器内）。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);

Answer 6

ocLazyLoad允许通过路由器（例如ui-router）在模板/视图中延迟加载脚本。这是sniplet

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

Answer 7

要从ui-view动态加载recaptcha，我使用以下方法：

在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>

Answer 8

不幸的是，这篇文章中的所有答案对我都没有用。我一直听到以下错误。

无法执行＆＃39;写＆＃39;在＆＃39;文件＆＃39;：不可能写从异步加载的外部脚本转换为文档，除非它被明确地打开了。

我发现，如果你使用一些第三方小部件（在我的情况下是需求力），也会调用其他外部JavaScript文件并尝试插入HTML，就会发生这种情况。看一下控制台和JavaScript代码，我注意到了这样的多行：

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

我使用了来自https://github.com/krux/postscribe的第三方JavaScript文件（htmlParser.js和postscribe.js）。这解决了这篇文章中的问题并同时修复了上述错误。

（在我现在的紧迫期限内，这是一个快速而肮脏的方式。但是我不习惯使用第三方JavaScript库。我希望有人能想出一个更清洁，更好的方法。）

Answer 9

我尝试明确使用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));
}

AngularJS：如何在ng-include中创建角度加载脚本？

9 个答案: