blocks|key|271212|text|简而言之:+AngularJS+("jqlite")不支持这一点。在你的页面上包含jQuery+(在包含Angular之前)，它应该可以工作。请参阅https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|271213|entityMap|0|LINK|mutability|MUTABLE|url|https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion^0|22|1S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Short answer: AngularJS ("jqlite") doesn't support this.  Include jQuery on your page (before including Angular), and it should work.  See <a href="https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion" rel="noreferrer">https://groups.google.com/d/topic/angular/H4haaMePJU0/discussion</a></p>


blocks|key|271255|text|从1.2.0-rc1开始，这将不再起作用。有关它的更多信息，请参见this+issue，我在其中发布了一条评论，描述了一种快速解决方法。我也会在这里分享它：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|271256|//+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);
++++}
}]);|code-block|syntax|javascript|271257|这不是最好的解决方案，但是，在随后的视图中放置脚本标记也不是。在我的例子中，我必须这样做，以便使用Facebook/Twitter/等小部件。|271258|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular.js/issues/3756^0|X|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This won't work anymore from 1.2.0-rc1. See <a href="https://github.com/angular/angular.js/issues/3756" rel="noreferrer">this issue</a> for more about it, in which I posted a comment describing a quick workaround. I'll share it here as well :</p>

<pre><code>// Quick fix : replace the script tag you want to load by a &lt;div load-script&gt;&lt;/div&gt;.
// 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 :
&lt;script src="/path/to/my/file.js"&gt;&lt;/script&gt;

// You'll have :
&lt;div ng-load-script&gt;&lt;/div&gt;

// And then write a directive like :
angular.module('myModule', []).directive('loadScript', [function() {
    return function(scope, element, attrs) {
        angular.element('&lt;script src="/path/to/my/file.js"&gt;&lt;/script&gt;').appendTo(element);
    }
}]);
</code></pre>

<p>Not the best solution ever, but hey, neither is putting script tags in subsequent views. In my case I have to do this is order to use Facebook/Twitter/etc. widgets.</p>


blocks|key|488363|text|我尝试了neemzy的方法，但它不适用于我使用1.2.0-rc.3。script标记将被插入到DOM中，但是javascript路径不会被加载。我怀疑这是因为我试图加载的javascript来自不同的域/协议。所以我采取了一种不同的方法，这就是我想出来的，以谷歌地图为例：(Gist)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|488364|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');
++++++++++++++++++++});
++++++++++++++++}
++++++++++++}
++++++++};
++++}]);|code-block|syntax|javascript|488365|我希望这对某些人有帮助。|488366|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/neilsoult/7255583^0|3T|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>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: (<a href="https://gist.github.com/neilsoult/7255583">Gist</a>)</p>

<pre><code>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&amp;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 &amp;&amp; $window.google.maps) {
                    console.log('gmaps already loaded');
                } else {
                    lazyLoadApi().then(function () {
                        console.log('promise resolved');
                        if ($window.google &amp;&amp; $window.google.maps) {
                            console.log('gmaps loaded');
                        } else {
                            console.log('gmaps not loaded');
                        }
                    }, function () {
                        console.log('promise rejected');
                    });
                }
            }
        };
    }]);
</code></pre>

<p>I hope it's helpful for someone.</p>


blocks|key|271316|text|被接受的答案不会从1.2.0-rc1%2B+(Github+issue)起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|271317|这是由endorama创建的快速修复|271318|/*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));|code-block|syntax|javascript|271319|只需添加此文件，将ngLoadScript模块作为应用程序依赖项加载，并使用type="text/javascript-lazy"作为脚本类型，以便在部分文件中延迟加载：|style|CODE|271320|<script+type="text/javascript-lazy">
++console.log("It+works!");
</script>|271321|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular.js/issues/3756|1|https://gist.github.com/endorama/7369006^0|L|C|0|0|3|8|1|0|0|9|C|12|R|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|19|8|@$A|1A|B|1B|M|N]|$A|1C|B|1D|M|N]]|9|@]|C|$]]|$1|O|3|P|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>The accepted answer won't work from 1.2.0-rc1+ (<a href="https://github.com/angular/angular.js/issues/3756">Github issue</a>).</p>

<p>Here's a quick fix created by <a href="https://gist.github.com/endorama/7369006">endorama</a>:</p>

<pre><code>/*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));
</code></pre>

<p>Simply add this file, load <code>ngLoadScript</code> module as application dependency and use <code>type="text/javascript-lazy"</code> as type for script you which to load lazily in partials:</p>

<pre><code>&lt;script type="text/javascript-lazy"&gt;
  console.log("It works!");
&lt;/script&gt;
</code></pre>


blocks|key|488440|text|我试着明确地使用Google+reCAPTCHA。示例如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488441|//+put+somewhere+in+your+index.html
<script+type="text/javascript">
var+onloadCallback+=+function()+{
++grecaptcha.render('your-recaptcha-element',+{
++++'sitekey'+:+'6Ldcfv8SAAAAAB1DwJTM6T7qcJhVqhqtss_HzS3z'
++});
};|code-block|syntax|javascript|488442|​|488443|//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));
}|488444|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I tried using Google reCAPTCHA explicitly. Here is the example:</p>

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

<p></p>

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


blocks|key|488476|text|ocLazyLoad允许通过路由器(例如ui-路由器)在模板/视图中延迟加载脚本。这是一个sniplet|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|488477|$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();
++++++++}]
++++}
});++|code-block|syntax|javascript|488478|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ocombe/ocLazyLoad|1|https://github.com/ocombe/ocLazyLoad#works-well-with-your-router^0|0|A|0|19|7|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p><a href="https://github.com/ocombe/ocLazyLoad" rel="nofollow">ocLazyLoad</a> allows to lazily load scripts in the templates/views via routers (e.g. ui-router).  Here is a <a href="https://github.com/ocombe/ocLazyLoad#works-well-with-your-router" rel="nofollow">sniplet</a></p>

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


blocks|key|271425|text|要从ui-view动态加载recaptcha，我使用以下方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|271426|在application.js中|271427|++++.directive('script',+function($parse,+$rootScope,+$compile)+{
++++return+{
++++++++restrict:+'E',
++++++++terminal:+true,
++++++++link:+function(scope,+element,+attr)+{
++++++++++++if+(attr.ngSrc)+{
+++++++++++++++++var+domElem+=+'<script+src="'%2Battr.ngSrc%2B'"+async+defer></script>';
+++++++++++++++++$(element).append($compile(domElem)(scope));


++++++++++++}
++++++++}
++++};
});|code-block|syntax|javascript|271428|在myPartial.client.view.html中|271429|+<script+type="application/javascript"+ng-src="http://www.google.com/recaptcha/api.js?render=explicit&onload=vcRecaptchaApiLoaded"></script>|271430|entityMap^0|2|7|0|1|E|0|0|1|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>To dynamically load recaptcha from a <code>ui-view</code> I use the following method:</p>

<p>In <code>application.js</code>:</p>

<pre><code>    .directive('script', function($parse, $rootScope, $compile) {
    return {
        restrict: 'E',
        terminal: true,
        link: function(scope, element, attr) {
            if (attr.ngSrc) {
                 var domElem = '&lt;script src="'+attr.ngSrc+'" async defer&gt;&lt;/script&gt;';
                 $(element).append($compile(domElem)(scope));


            }
        }
    };
});
</code></pre>

<p>In <code>myPartial.client.view.html</code>:</p>

<pre><code> &lt;script type="application/javascript" ng-src="http://www.google.com/recaptcha/api.js?render=explicit&amp;onload=vcRecaptchaApiLoaded"&gt;&lt;/script&gt;
</code></pre>


blocks|key|488556|text|我使用此方法动态加载脚本文件(在控制器中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|488557|var+script+=+document.createElement('script');
script.type+=+'text/javascript';
script.src+=+"https://maps.googleapis.com/maps/api/js";
document.body.appendChild(script);|code-block|syntax|javascript|488558|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used this method to load a script file dynamically (inside a controller).</p>

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


<p>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</p>

<p>The problem is this.</p>

<p>I have something like this in my main.html:</p>

<pre><code>&lt;ngInclude src="partial.html"&gt;
&lt;/ngInclude&gt;
</code></pre>

<p>And my partial.html has something like this</p>

<pre><code>&lt;h2&gt; heading 1 &lt;h2&gt;
&lt;script type="text/javascript" src="static/js/partial.js"&gt;
&lt;/script&gt;
</code></pre>

<p>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?</p>

<p>I knwo angular has some special meaning to script tag. Can I override it?</p>


AngularJS: How to make angular load script inside ng-include?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

嘿，我正在用angular建立一个网页。问题是有些东西已经没有angular了，我必须把它们也包括进来问题是这样的。我的main.html里有这样的东西：<ngInclude src="partial.html"></ngInclude>我的partial.html有类似这样的东西<h2> heading 1 <h2>...

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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