È necessario includere un tag script che renderà il widget sul modello angularjs.Includere il widget js esterno nel modello angolare
Per esempio mi piacerebbe includere questo
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>
Ma angolare non renderà esso.
Poiché gli script 100widgets manipolano DOM e aggiungono altri tag <script> a file HTML, potrebbero non funzionare correttamente. Inoltre alcuni di questi widget sono basati su Flash, quindi lo script aggiunge riferimento agli oggetti SWF. Penso che una possibilità sia quella di analizzare l'output della richiesta in url nell'attributo src (nell'esempio http://100widgets.com/js_data.php?id=106) e provare ad aggiungere la manipolazione e gli script DOM corrispondenti al modello in cui desideri venga visualizzato il widget.
Di seguito è riportato un esempio che mostra una pagina (pagina1) NON FUNZIONANTE (è stato semplicemente aggiunto il tag dello script durante la digitazione) e una seconda pagina (pagina2) il cui modello presenta gli inserimenti necessari per visualizzare il widget del calendario.
PS: a causa della limitazione della sandbox questo snippet non potrebbe funzionare qui su SO; prova questa versione di CodePen in modalità di debug: http://codepen.io/beaver71/pen/MyjBoP oppure crea la tua versione distribuita sul tuo server web locale.
(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&gid=0&text1=St Valentines is on 14th February 2012&&event_time=&rec=&rnd=0&gha=0&ghb=0&ghf=1&gbc=FFB200&gfc=040244&gtc=F9F9FF&gnu=http://mycalendar.org/widget/&fna=&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>A causa di vincoli di sicurezza, angolare non analizza <script> tag all'interno dei modelli.
Quindi il widget a cui ci si sta riferendo sta utilizzando document.write. Document.write non è disponibile al termine del caricamento della pagina.
Quindi, sembra che non ci sia una via facile qui.
Tuttavia, come quello che stai cercando di fare, è qualcosa che è abbastanza comune in add-script, krux creato postscribe. Un modo per aggirare questo problema. A mia volta ho creato una piccola direttiva che utilizza questa libreria.
Nel modello sarà simile a questa:
<div ps-src="http://100widgets.com/js_data.php?id=21"></div>
direttiva:
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);
È possibile see it in action in this plunk
Non tutti i widget comportarsi bene in combinazione con tuttavia, alcuni postscribe sembrano mostrare alcuni artefatti nell'html. Al momento mi manca il tempo per scoprire chi è la colpa di questo (100widgets o postscribe), ma se hai davvero bisogno di questo, questo è qualcosa che può essere risolto.
errore di console? – Vineet
nessun errore, solo non rendering nulla. btw sto usando AngularJS v1.3.4. – waney
Potresti fornire più codice? Qual è il codice angolare? Dove stai cercando di mettere questo script e qual è lo scopo? – aprok