मुझे स्क्रिप्ट टैग शामिल करने की आवश्यकता है जो मेरे कोणीय टेम्पलेट पर विजेट प्रस्तुत करेगा।कोणीय टेम्पलेट में बाहरी जेएस विजेट शामिल करें
उदाहरण के लिए मैं इस
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=106"></script>
शामिल था लेकिन कोणीय यह प्रस्तुत नहीं होगी।
चूंकि 100widgets स्क्रिप्ट्स DOM में हेरफेर करते हैं और अन्य <script> टैग HTML फ़ाइल में जोड़ते हैं, तो यह ठीक से काम नहीं कर सका। मोरओवर इनमें से कुछ विजेट फ़्लैश आधारित हैं इसलिए स्क्रिप्ट एसडब्ल्यूएफ ऑब्जेक्ट्स का संदर्भ जोड़ती है। मुझे लगता है कि एक विशेषता स्रोत विशेषता में url के अनुरोध के आउटपुट का विश्लेषण करना है (आपके उदाहरण http://100widgets.com/js_data.php?id=106 में) और उस टेम्पलेट में संबंधित DOM मैनिपुलेशन और स्क्रिप्ट जोड़ने की कोशिश कर रहा है जिसमें आप विजेट दिखाई देंगे।
के बाद एक पृष्ठ (पृष्ठ 1) नहीं काम दिखा एक उदाहरण है और एक दूसरे पेज (पृष्ठ 2) जिसका टेम्पलेट सम्मिलन कैलेंडर विजेट दिखाने के लिए की जरूरत है (बस स्क्रिप्ट टैग के रूप में आपके द्वारा लिखे गए जोड़ा)।
पीएस: सैंडबॉक्स प्रतिबंध के कारण यह स्निपेट SO पर यहां काम नहीं कर सका; डीबग मोड में इस कोडपेन संस्करण को आजमाएं: http://codepen.io/beaver71/pen/MyjBoP, या अपने स्थानीय वेब सर्वर पर तैनात अपना स्वयं का संस्करण बनाएं।
(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>सुरक्षा कमी के कारण, कोणीय टेम्पलेट्स अंदर <script> टैग पार्स नहीं है।
फिर जिस विजेट का आप उल्लेख कर रहे हैं, वह document.write का उपयोग कर रहा है। एक बार आपका पृष्ठ लोड होने के बाद Document.write अनुपलब्ध है।
तो, यहां कोई आसान तरीका नहीं दिखता है।
हालांकि, जैसा कि आप करने की कोशिश कर रहे हैं, कुछ ऐसा है जो एड-स्क्रिप्ट में काफी सामान्य है, kruxpostscribe बनाया गया। इस मुद्दे के आसपास एक रास्ता। मेरी बारी पर मैंने एक छोटा सा निर्देश बनाया जो इस पुस्तकालय का उपयोग करता है।
<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 में कुछ कलाकृतियों को प्रदर्शित करने लगते हैं। मुझे वर्तमान में यह जानने का समय नहीं है कि इस के लिए दोषी कौन है (100widgets या postcribe), लेकिन अगर आपको वास्तव में इसकी ज़रूरत है, तो यह कुछ ऐसा है जिसे काम किया जा सकता है।
कोई कंसोल त्रुटि प्राप्त कर रहा है? – Vineet
कोई त्रुटि नहीं, बस कुछ भी प्रस्तुत नहीं कर रहा है। बीटीडब्ल्यू मैं AngularJS v1.3.4 का उपयोग कर रहा हूँ। – waney
क्या आप और कोड प्रदान कर सकते हैं? कोणीय कोड क्या है? आप इस स्क्रिप्ट को कहां रखने की कोशिश कर रहे हैं और उद्देश्य क्या है? – aprok