角度テンプレートに外部jsウィジェットを含める

anglejsテンプレートにウィジェットをレンダリングするscriptタグを含める必要があります。角度テンプレートに外部jsウィジェットを含める

は、例えば、私はこの

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

含めると思います。しかし、角度、それを表示されません。

出典

2015-09-04 waney

コンソールエラーが発生しましたか？ – Vineet

エラーは発生せず、何も表示されません。 btw私はAngularJS v1.3.4を使用しています。 – waney

もっとコードを提供できますか？角度コードは何ですか？このスクリプトをどこに置こうとしていますか、目的は何ですか？ – aprok

100widgetsスクリプトはDOMを操作し、<script>タグをHTMLファイルに追加するため、正しく動作しませんでした。 Moroverこれらのウィジェットの一部はFlashベースなので、スクリプトはSWFオブジェクトへの参照を追加します。 src属性（あなたの例ではhttp://100widgets.com/js_data.php?id=106）のURLへのリクエストの出力を分析し、対応するDOM操作とスクリプトをウィジェットを望むテンプレートに追加しようとする可能性があると思います。

以下は、入力したときにスクリプトタグを追加したページ（ページ1）と、カレンダーウィジェットを表示するのに必要な挿入テンプレートを持つ2ページ目（ページ2）を示す例です。

PS：サンドボックスの制限により、このスニペットはここでは機能しませんでした。この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は使用できません。
ここでは簡単な方法はないようです。

しかし、あなたがしようとしているものは、kruxが作成されたpostscribeのようなものです。この問題を回避する方法。私の順番に、私はこのライブラリを利用する小さな指示文を作成しました。あなたはsee it in action in this plunk

ではないすべてのウィジェットのは、との組み合わせでうまく振る舞うことができる

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);

：

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

ディレクティブ：

テンプレートでは、次のようになりますそれらのうちのいくつかは、htmlにいくつかの人工物を表示しているようだ。私は現在、誰がこれを責めるべきかを知る時間がありませんが（100ウィジェットまたはポストスクライブ）、実際にこれが必要な場合は、これを解決することができます。

出典

2016-03-15 11:59:08

角度テンプレートに外部jsウィジェットを含める

答えて

関連する問題