在角模板中包含外部js小部件

我需要包含脚本标记，它将在我的angularjs模板上呈现小部件。在角模板中包含外部js小部件

比如我包括此

<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>

但角度不会渲染。

来源

2015-09-04 waney

得到任何控制台错误？ – Vineet

没有错误，只是没有渲染任何东西。顺便说一句我正在使用AngularJS v1.3.4。 – waney

你能提供更多的代码吗？什么是角码？你想把这个剧本放在哪里，目的是什么？ – aprok

由于100widgets脚本处理DOM并将其他<script>标签添加到HTML文件，因此无法正常工作。 Morover其中一些小部件是基于Flash的，因此该脚本添加了对SWF对象的引用。我认为有一种可能性是分析请求的输出到src属性中的url（在您的示例http://100widgets.com/js_data.php?id=106中），并尝试将相应的DOM操作和脚本添加到您希望小部件出现的模板中。

以下是一个显示页面（page1）NOT WORKING（仅键入脚本标记时添加）和第二个页面（page2）的示例，其模板具有显示日历小部件所需的插入。 PS：由于沙盒限制，这个片段无法在SO上工作;在调试模式下试用这个CodePen版本：http://codepen.io/beaver71/pen/MyjBoP，或者在您的本地Web服务器上创建您自己的版本。

(function() { 
 
    'use strict'; 
 

 
    angular. 
 
    module('myApp', ['ui.router']). 
 
    config(configRouteProvider). 
 
    controller('AppCtrl', AppCtrl); 
 

 
    function AppCtrl($location, $rootScope) { 
 
    $rootScope.$on('$stateChangeStart', onStateChangeStart); 
 

 
    function onStateChangeStart(event, toState, toParams, fromState, fromParams, options) { 
 
     console.log('From:', fromState.name, 
 
     'to:', toState.name); 
 
    } 
 
    } 
 

 
    function configRouteProvider($stateProvider, $urlRouterProvider) { 
 
    $stateProvider 
 
     .state('home', { 
 
     url: '/', 
 
     templateUrl: 'views/home.html' 
 
     }) 
 
     .state('page1', { 
 
     url: '/pag1', 
 
     templateUrl: 'views/page1.html', 
 
     }) 
 
     .state('page2', { 
 
     url: '/pag2', 
 
     templateUrl: 'views/page2.html', 
 
     }); 
 
    $urlRouterProvider.otherwise('/'); 
 
    } 
 

 
}());

body { 
 
    margin: 0px; 
 
} 
 
hr { 
 
    margin: 0px; 
 
} 
 
.tabs { 
 
    padding: 8px; 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.tabs a, 
 
.tabs a:visited, 
 
.tabs a:active, 
 
.tabs a:hover { 
 
    color: white; 
 
} 
 
.my-tab { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 8px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
    <script src='https://code.angularjs.org/1.4.0/angular.min.js'></script> 
 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js'></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="AppCtrl as app"> 
 
    <div class="tabs"> 
 
    <a href="#" ui-sref="home">Home</a> 
 
    <a href="#" ui-sref="page1">Page1</a> 
 
    <a href="#" ui-sref="page2">Page2</a> 
 
    </div> 
 
    <hr /> 
 
    <div ui-view></div> 
 

 
    <script id="views/home.html" type="text/ng-template"> 
 
    <div class="my-tab"> 
 
     <h3>Home</h3> 
 
     <p>bla bla bla</p> 
 
    </div> 
 
    </script> 
 

 
    <script id="views/page1.html" type="text/ng-template"> 
 
    <div class="my-tab"> 
 
     <h3>Page1</h3> 
 
     <p>Using script type="text/javascript"... NOT WORKING:</p> 
 
     <script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script> 
 
    </div> 
 
    </script> 
 

 
    <script id="views/page2.html" type="text/ng-template"> 
 
    <div class="my-tab"> 
 
     <h3>Page2</h3> 
 
     <p>Workaround</p> 
 
     <!--code1--> 
 
     <div class="scriptcode"> 
 
     <!--ecode1--> 
 
     <a target='_blank' href='http://100widgets.com/calendars/106-calendar.html'> 
 
      <embed align="middle" id="calendar" width="170" height="156.111111111" allowscriptaccess="always" quality="high" salign="lt" wmode="transparent" src="http://100widgets.com/js-files/postit.swf?UTCoffset=0&amp;gid=0&amp;text1=St Valentines is on 14th February 2012&amp;&amp;event_time=&amp;rec=&amp;rnd=0&amp;gha=0&amp;ghb=0&amp;ghf=1&amp;gbc=FFB200&amp;gfc=040244&amp;gtc=F9F9FF&amp;gnu=http://mycalendar.org/widget/&amp;fna=&amp;ims=" 
 
      type="application/x-shockwave-flash" /> 
 
     </a> 
 
     <!--code2--> 
 
     </div> 
 
     <!--ecode2--> 
 
     <!--below commented cause it's not necessary --> 
 
     <!--script type="text/javascript"> 
 
     var js = document.createElement("script"); 
 
     js.type = "text/javascript"; 
 
     js.src = "http://100widgets.com/stat.js.php"; 
 
     document.body.appendChild(js); 
 
     </script--> 
 
    </div> 
 
    </script> 
 
</body>

来源

2016-03-14 10:28:56 beaver

由于安全限制，角度不分析模板内<script>标签。
然后，您所指的小部件正在使用document.write。一旦您的页面加载完成，Document.write就不可用。
所以，这里似乎没有简单的出路。

但是，正如你正在尝试做的那样，在add-script中是很平常的，krux创建了postscribe。解决这个问题的方法。轮到我创建了一个利用这个库的小指令。

在你的模板将是这个样子：

<div ps-src="http://100widgets.com/js_data.php?id=21"></div>

指令：

function psScr($document) { 
    return { 
     restrict: 'A', 
     scope: { 
     psSrc: '@' 
     }, 
     link: link 
    } 

    function link(scope, elm) { 
     if (typeof postscribe !== 'undefined') { 
     postscribe(elm[0], `<script src='${scope.psSrc}'></script>`); 
     } else { 
     // If postscibe isn't loaded, first load the needed libarary 
     var script = document.createElement('script'); 
     script.src = 'https://gitcdn.xyz/repo/krux/postscribe/master/dist/postscribe.js'; 
     script.onload = function() { 
      // once postscibe is in, kick it into action. 
      link(scope,elm); 
     }; 
     document.head.appendChild(script); 
     } 
    } 
    } 

    angular.module('psSrcModule', []) 
    .directive('psSrc', psScr);

可以see it in action in this plunk

并非所有部件的表现很好地结合尽管如此，他们中的一些似乎在html中显示了一些文物。我目前没有时间找出谁应该为此负责（100个小工具或订阅），但如果您真的需要这个，这是可以解决的问题。

来源

2016-03-15 11:59:08

在角模板中包含外部js小部件

回答

相关问题