Question

我搜索过你好，找不到与我的特定情况相关/有帮助的帖子。

我有一个加载各种小部件的应用程序，其中一些小部件加载包含需要执行的第三方JS的JSONP。

我已经能够在widget元素（指令模板）中加载JS，但是，我无法弄清楚如何让JS实际执行。

我已经考虑过在编译时可能会这样做，但我是新手，所以不确定这是不是正确的方法。我尝试使用eval（）但是没有用。我试过。$ digest和。$ apply但是也没用。我只需要让JS执行，好像我把它放在没有任何Angular的HTML中。当我通过基本的jquery / HTML页面进行操作时，它按预期工作。

以下是相关代码：

angular.module('protoApp')
.directive('thirdPartyWidget',['$http',function($http){
    return {
        restrict: 'E',
        scope: {},
        template: '<div id="myWidget"></div>',
        replace: true,
        link: function($scope, $el, $attrs){
            $http({
                method: 'JSONP',
                responseType: 'jsonp',
                url: $scope.url,
                data: thirdPartyWidgetProperties
            })
            .then(function(response){

                // this will properly insert JS into my $el
                // but this JS will not do anything/run.
                $el.append(response.data.html);
            });
        }
    }
}]);

（我知道我应该在这里直接使用服务而不是$ http，但我只是想尽可能简单地使用它。）

例如，其中一个JS脚本适用于Google Analytics。我希望在JSONP加载到$ el后，应该有一个GA请求，就像在非AngularJS版本中一样。

当我检查DOM时，我可以看到脚本确实被附加到$ el中，但是它没有运行或执行它应该做的事情。它就像这样：

<div class="ng-isolate-scope"><div id="remoteProfiles"></div><script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-99999-99', 'website_name.com');
    ga('send', 'pageview');
</script>
<script type="text/javascript">...3rd party widget stuff...</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.min.js"></script>
<!--<script src="//requirejs.org/docs/release/2.1.11/comments/require.js"></script>--></div>

所以，看，它就在那里。如何让它实际运行？

任何信息，建议，帖子，您可以指向我的任何内容都将受到赞赏。

Answer 1

所以，我得到这个工作的唯一方法是基本上把所有初始化JS放在Angular之外。它加载的代码是野兽。它加载需要并且做了许多有点想法的事情，Angular只是做了一个有趣的脸。它使用JS逻辑加载HTML，以便它可以为任何站点封装。 Angular只是在脚本标签上窒息而且并不想处理它们。

我确实有一个版本，其中所有代码都在index.html文件中，在我的指令中只有一个div和一个ID。这很难看，我想继续寻找。

使用这篇文章（AngularJS: How to make angular load script inside ng-include?）和这个指令（https://gist.github.com/subudeepak/9617483#file-angular-loadscript-js），我能够在指令的模板中加载我的所有脚本。我确实需要创建一些全局变量（$ document和$ window不能让我们的模板中的脚本可用），但它比仅仅拥有index.html文件中的所有内容要清晰得多。如果指令永远不会加载，我的额外脚本也不会加载。

我放弃了指令周围的所有内容，然后把它直接合并到我现有的架构中（已经有了这样的模块，并且不需要关闭）。

Angular parse / evaluate / execute JS由第三方JS加载到指令模板中

1 个答案: