AngularJS：如何使内部NG-包括角负载脚本？ [英] AngularJS: How to make angular load script inside ng-include?

问题描述

嗨我建立一个网页，与棱角分明。问题是，有出头已经建立一个没有棱角，我必须把它们作为以及

Hey I am building a web page with angular. The problem is that there are somethings already build without angular and I have to include them as well

问题是这样的。

我在我的main.html中是这样的：

I have something like this in my main.html:

<ngInclude src="partial.html">
</ngInclude>

和我partial.html有这样的事情

And my partial.html has something like this

<h2> heading 1 <h2>
<script type="text/javascript" src="static/js/partial.js">
</script>

和我partial.js无关与angularjs。 nginclude的作品，我可以看到HTML，但我无法看到的JavaScript文件中加载的。我知道如何使用萤火/铬开发工具，但我甚至不能看到网络请求正在取得进展。我在做什么错了？

And my partial.js has nothing to do with angularjs. nginclude works and I can see the html, but I can not see the javascript file being loaded at all. I know how to use firebug/ chrome-dev-tool, but I can not even see the network request being made. What am I doing wrong?

我knwo角度有一些特殊意义的脚本。我可以重写它？

I knwo angular has some special meaning to script tag. Can I override it?

推荐答案

我试过neemzy的做法，但它并没有采用我1.2.0-rc.3的工作。脚本标记将被插入到DOM，但JavaScript的路径将不会被加载。我怀疑这是因为我试图加载JavaScript是从不同的域/协议。
所以我采取了不同的做法，这是我想出了使用谷歌地图为例：（要点）

I tried neemzy's approach, but it didn't work for me using 1.2.0-rc.3. The script tag would be inserted into the DOM, but the javascript path would not be loaded. I suspect it was because the javascript i was trying to load was from a different domain/protocol. So I took a different approach, and this is what I came up with, using google maps as an example: (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');
                    });
                }
            }
        };
    }]);

我希望它的人有所帮助。

I hope it's helpful for someone.

这篇关于AngularJS：如何使内部NG-包括角负载脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！