I would like to ask, I am trying to make a simple code which is to render out the YouTube's embed sharing code given I am using ng-repeat to loop through multiple inputs but i cant seem to get the proper render instead what I have got is text. How should I make it into a proper HTML output?
Below is the plunkr file I made as an example.
Thank you
Fo this purpose i would make some changes and approach in another way for your case:
Fixed here http://plnkr.co/edit/COnvjvoaYV643oQ46p9B?p=preview
JS
var app = angular.module('myApp', []);
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
});
app.controller('videoController', ['$scope',
function MyCtrl($scope) {
$scope.product = {
name: 'some name',
description: 'some description',
media: [{
src: 'pbuGSt3Hb8k'
},{
src: 'y_o-ULSWWng'
}]
};
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
};
}
]);
HTML
<html ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="videoController">
<div ng-repeat="media in product.media">
<div class="thumbnail">
<div class="video-container">
<iframe width="560" height="315" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
use ng-bind-html like this:
<body ng-app="videoGall">
<div ng-controller="topicVideoCtrl">
<div ng-repeat="video in videos"><div ng-bind-html="makeTrust(video.url)"></div> </div>
</div>
</body>
and
videoGall.controller('topicVideoCtrl', function ($scope, $http,$sce) {
$scope.makeTrust=function(html){return $sce.trustAsHtml(html);};
$scope.videos = [
{"url":"<iframe width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/pbuGSt3Hb8k\" frameborder=\"0\" allowfullscreen><\/iframe>"},
{"url":"<iframe width=\"560\" height=\"315\" src=\"\/\/www.youtube.com\/embed\/y_o-ULSWWng\" frameborder=\"0\" allowfullscreen><\/iframe>"}];
});
Related
I used the website tsviewer.com to create an insertable piece of HTML code I can insert into my webpage that will display the status of my Teamspeak server. This is what it gave me. But this doesn't quite work in vue as I don't know where to place the scripts.
<div id="ts3viewer_1118023" style=""> </div>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "https://www.tsviewer.com/ts3viewer.php?ID=1118023&text=757575&text_size=12&text_family=1&text_s_color=000000&text_s_weight=normal&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_i_color=&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_c_color=&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_u_color=000000&text_u_weight=normal&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_s_color_h=&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=none&text_i_color_h=000000&text_i_weight_h=bold&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=none&text_c_color_h=&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=none&text_u_color_h=&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none&iconset=default";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
Discord on the other hand gives a single line of code that is easily inserted and works perfectly.
<iframe src="https://discordapp.com/widget?id=261587898996883458&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
The question is, how does one convert the one kind to the other kind? Thanks
you need to add the Javascript before the tag of your
website ends.
important is than that you render an div which the right id
Here some example
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js">
</script>
<script src="https://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script>
var ts3v_url_1 = "[add here the whole teamspeaker snippet url]";
ts3v_display.init(ts3v_url_1, 1118023, 100);
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<div id="ts3viewer_1118023" style=""> </div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>
I have removed the tsviewer code in his full length because the list is public.
You should add him there [add here the whole teamspeaker snippet url]
Maybe you should also modfiy your post after it or change the url as an example.
I need to show my angular project(mentioned as http://test.com ) inside the div(.test). Is it possible to show angular project inside div without using iframe, object and embed? .Here is my code .Any help would be amazing .Thanks in advance
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'http://test.com', //Pass URL here
type: "GET", //Also use GET method
success: function (data) {
$('.test').html(data);
}
});
});
</script>
</head>
<body>
<div> Div of base html</div>
<div class="test"></div>
</body>
</html>
in your app.component.html you can put your <app-root></app-root> inside what you want:
<header (menuToggle)="sideMenu.toggle()"></header>
<menu [menu]="menu" #sideMenu></menu>
<div>
<app-root></app-root>
</div>
<footer></footer>
this is my app.component.html for example
I apologize for the poor formatting. Basically, "clientCount" is appearing as {{clientCount}} on my screen, rather than the integer '10'. Any ideas? Thank you!
var app = angular.module('metaDashboard', []);
/**This is for the meta-dashboard home page
*/
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
--------------------------------------------------------------------
<html lang="en" ng-app="app">
<body class="page-body" data-url="http://neon.dev" ng-app="app">
<div class="row" ng-controller="TotalNumberController">
<div class="icon"><i class="entypo-globe"></i></div>
<div class="num"> {{clientCount}} </div>
<h3>Clients</h3>
<p></p>
</div>
</body>
</html>
Your app is called metaDashboard not app, you should change your code to the following:
<html lang="en" ng-app="metaDashboard">
Also ensure that you have angular.js files included in your head section.
Full snippet:
var app = angular.module('metaDashboard', []);
app.controller('TotalNumberController', ['$scope', function($scope) {
$scope.clientCount = '10';
$scope.campaignCount = '20';
$scope.accountCount = '10';
$scope.userCount = '100';
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="metaDashboard">
<div ng-controller="TotalNumberController">
<h1>{{clientCount}}</h1>
</div>
</body>
</html>
I have also included this Plunker here for you demonstrating it working:
https://plnkr.co/edit/t80RjCqjmE3y9bOkESo0?p=preview
As an additional note, it may be best to use the ViewModel syntax rather than $scope which I believe is best practice and may help you if you ever nested your AngularJS controllers.
I am learning angular js from code school and this is their code. It wont display my products rather it shows the code exactly as in {{..}}. I have thoroughly checked for errors nothing seems to work. I have tried removing th alias of StoreController as store and used just StoreController, that doesn't work either. I enclosed my entire js code in a function but that didnt work too. I have attached the picture of my result too.
My Javascript Code in ang.js file
var app = angular.module('GemsStore',[]);
app.controller('StoreController',function(){
this.products=gems;
});
var gems=[
{
name:'Diamond',
price:100,
description:'Shiny',
canPurchase:true,
soldOut:false
},
{
name:'Sapphire',
price:200,
description:'Shiny',
canPurchase:true,
soldOut:false
}
];
My html Code
<!DOCTYPE html>
<html ng-app="GemsStore">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="store.product.soldOut">
<h1>{{store.product.name}}</h1>
<h2>{{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button class="btn-default" ng-show="store.product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="js/ang.js"></script>o
<script src="angular.min.js"></script>
</body>
</html>
My result
edited code
JS code
app.controller('StoreController', function() {
var gems = [{
name: 'Diamond',
price: 100,
description: 'Shiny',
canPurchase: true,
soldOut: false
},
{
name: 'Sapphire',
price: 200,
description: 'Shiny',
canPurchase: true,
soldOut: false
}
];
this.products = gems;
});
Your HTML code
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>{{product.price}}</h2>
<p>{{product.description}}</p>
<button class="btn-default" ng-show="product.canPurchase">Add To Cart</button>
</div>
</div>
<script src="angular.min.js"></script>
<script src="js/ang.js"></script>
</body>
Hi I'm trying to make a slider I got off the internet to work, but, I keep getting errors. In gallery.html, when I put the slider element at the top I get nothing, when I put it at the bottom I get errors. The error is something along the lines
Error: [$compile:tplrt] http://errors.angularjs.org/1.4.8/$compile/tplrt?p0=slider&p1=partials%2Fgallery.html
Changed my code to match the suggestions in one of the comments.
I'm no longer getting the error to do with not have just 1 root element. Now, I can't get the next and previous to work. It just redirects me to the main page.
Note:
- gallery.html and slider.html are in a folder called partials
- all the images are in a folder called img
Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<!-- ANGULAR IMPORTS -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ui-router-master/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-animate.js"></script>
<!-- JS FILES -->
<script src="js/controller.js"></script>
<script src="js/directives.js"></script>
<link href='css/app.css' rel='stylesheet' type='text/css'>
</head>
<body class="container">
<div class="navbar">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="state1">State 1</a></li>
<li><a ui-sref="state2">State 2</a></li>
<li><a ui-sref="gallery">Gallery</a></li>
</ul>
</div>
<div class="dynamiccontent">
<div ui-view></div>
</div>
<!-- App Script -->
<script>
/** MAIN ANGULAR VAR */
var myapp = angular.module('myapp', [
/**IMPORT DEPENDENCIES*/
'ui.router',
'ngAnimate',
/**FILE DEPENDENCIES*/
'appController',
'slider.directive'
]);
/** UI-ROUTING */
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /state1
$urlRouterProvider.otherwise("/state1")
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: 'state1controller'
})
.state('gallery', {
url: "/gallery",
templateUrl: "partials/gallery.html",
controller: 'slidercontroller'
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: 'state2controller'
});
});
</script>
</body>
</html>
controller.js
var appController = angular.module('appController',[]);
appController.controller('state1controller', ['$scope', function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}]);
appController.controller('state2controller', ['$scope', function($scope){
$scope.things = ["A", "List", "Of", "Items"];
}]);
appController.controller('slidercontroller', ['$scope', function($scope) {
$scope.pictures=[{src:'img1.png',title:'Pic 1'},{src:'img2.jpg',title:'Pic 2'},{src:'img3.jpg',title:'Pic 3'},{src:'img4.png',title:'Pic 4'},{src:'img5.png',title:'Pic 5'}];
}]);
directive.js
angular.module('slider.directive', [])
.directive('slider', function ($timeout) {
return {
restrict: 'AE',
replace: true,
scope:{
pictures: '='
},
link: function (scope, elem, attrs) {
scope.currentIndex=0;
scope.next=function(){
scope.currentIndex<scope.pictures.length-1?scope.currentIndex++:scope.currentIndex=0;
};
scope.prev=function(){
scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.pictures.length-1;
};
scope.$watch('currentIndex',function(){
scope.pictures.forEach(function(image){
image.visible=false;
});
scope.pictures[scope.currentIndex].visible=true;
});
/* Start: For Automatic slideshow*/
var timer;
var sliderFunc=function(){
timer=$timeout(function(){
scope.next();
timer=$timeout(sliderFunc,5000);
},5000);
};
sliderFunc();
scope.$on('$destroy',function(){
$timeout.cancel(timer);
});
/* End : For Automatic slideshow*/
},
templateUrl:'partials/slider.html'
}
});
gallery.html
<slider pictures="pictures"></slider>
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in pictures">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
You are mixing several concerns here. partials/gallery.html is used as a template for your directive and your page. This leads to the directive being used itself in it's own template.
The solution is to remove your directive code from gallery.html and use it in a new file slider.html.
directive.js
.directive('slider', function ($timeout) {
return {
...
templateUrl:'partials/slider.html'
slider.html
<div class="slider">
<div class="slide" ng-repeat="image in images">
<img ng-src="img/{{image.src}}"/>
</div>
<div class="arrows">
<img src="img/left-arrow.png"/>
<img src="img/right-arrow.png"/>
</div>
</div>
gallery.html
<slider images="pictures"/>
First off - the error does have to do with the root element.
https://docs.angularjs.org/error/$compile/tplrt
Template for directive '{0}' must have exactly one root element. {1}
Now that you fixed that issue - your infinite loop is called because you're trying to populate the slider directive with gallery.html - but in that template, you're calling the slider directive. So that's an infinite loop.