The videos work fine if I go directly to the page (/stream), but if load that page through ng-view, the video won't load and I'm not sure what's wrong.
In index.html:
<a href="#stream">stream</a
<div ng-view></div>
In stream.html:
<style>
video {
width: 250px;
height: 150px;
}
</style>
<nav class="row">
<div class="col-xs-6 col-md-1">
</div>
<div class="col-xs-6 col-md-2">
<a href ng-click = "controller.setVideo(0)">
<div style="text-align:center">stream 1</div>
<video data-dashjs-player autoplay src="http://localhost:1935/test/test1.stream/manifest.mpd" muted></video>
</a>
</div>
<div class="col-xs-6 col-md-2">
<a href ng-click = "controller.setVideo(1)">
<div style="text-align:center">stream 2</div>
<video data-dashjs-player autoplay src="http://vm2.dashif.org/livesim/testpic_2s/Manifest.mpd" muted></video>
</a>
</div>
</nav>
In app.js:
App.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.html"
})
.when("/stream", {
templateUrl : "stream.html"
});
});
Related
I'm trying to show image url from database on GUI with Blueimp Lightbox gallery but i get some error
Here is my html and js code:
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="lightBoxGallery">
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="i.url" title="i.title" data-gallery="">
<img src="i.url">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child
element of the document body
-->
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
</div>
</div>
</div>
Angular controller
.controller('ImagesCtrl', function ($rootScope, $scope, $state, $stateParams, ImagesService) {
$scope.find = function() {
ImagesService.find()
.success(function(data, status) {
$scope.images = data;
})
.error(function(data, status) {
$.growl({ message: '<br>Getting data failed', title: '<b>ERROR</b>' }, { type: 'danger' });
});
}
$scope.find();
});
as result on GUI i get list of objects in images variable, but it show me error for this i.url
GET http://localhost:8080/i.url 404 (Not Found)
but when i go to network tab in browser i see this object and value inside variable url.
Does anyone know what could be the problem?
ERRONEOUS
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="i.url" title="i.title" data-gallery="">
<img src="i.url">
</a>
</div>
The attributes need double curley brackets:
<div ng-repeat="i in images" class="col-sm-12 m-b-xs" style="padding-left: 0px;">
<a href="{{i.url}}" title="{{i.title}}" data-gallery="">
<img src="{{i.url}}">
</a>
</div>
Javascript is not being loaded within ui-view. The widget on the INDEX PAGE loads fine, the widget on the HOME PAGE does not. Is there a way maybe refresh the view without actually causing a refresh? Or any other suggestions?
-----------------------------------------------
INDEX PAGE:
<div class="page-content-wrap">
<div class="block">
<div class="widget widget-default widget-carousel">
<div class="owl-carousel" id="owl-example">
<div>
<div class="widget-title">Total Visitors</div>
<div class="widget-subtitle">27/08/2014 15:23</div>
<div class="widget-int">3,548</div>
</div>
<div>
<div class="widget-title">Returned</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,695</div>
</div>
<div>
<div class="widget-title">New</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,977</div>
</div>
</div>
</div>
<div ui-view="main">
</div>
</div>
</div>
-----------------------------------------------
HOME PAGE VIEW:
<div class="well">
<div class="block">
<div class="widget widget-default widget-carousel">
<div class="owl-carousel" id="owl-example">
<div>
<div class="widget-title">Total Visitors</div>
<div class="widget-subtitle">27/08/2014 15:23</div>
<div class="widget-int">3,548</div>
</div>
<div>
<div class="widget-title">Returned</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,695</div>
</div>
<div>
<div class="widget-title">New</div>
<div class="widget-subtitle">Visitors</div>
<div class="widget-int">1,977</div>
</div>
</div>
</div>
<div ui-view="main">
</div>
</div>
</div>
-----------------------------------------------
APP.JS
stateProvider
.state('home', {
module: 'public',
url: '/home',
name: 'home',
views: {
'main#': {
templateUrl: 'home.do',
},
},
data: {
displayName: 'Home',
}
})
-----------------------------------------------
Thanks in advance for you assistance.
I am learning as I go with my first Angular project and have ran into an issue.
Goal: When an link is clicked in a given .html template placed in with ng-include, I want it to change the value of $scope.selectedLocation
The issue: The value of $scope.selectedLocation does not change.
I read that the ng-include creates a child scope, so in order to change the parent scope variable, you could place $parent in front of the value. I have tried this and it does not work.
Main index page:
<body ng-app="photoApp" id="bodyDiv" >
<div ng-controller="PhotoGallery">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
</div>
<div ng-switch-when="loc1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="loc2">
<div ng-include="'file2.html'"></div>
</div>
</ng-switch>
</div>
</div>
</body>
home.html code:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
photoApp.js code:
var photoApp= angular.module('photoApp', []);
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.selectedLocation ="home";
}
The issue is that you're binding to a primitive in an inherited scope. To fix it you should pass an object:
westonPhotographyApp.controller('PhotoGallery', function($scope)
{
$scope.vm = {
selectedLocation: "home"
}
}
Html
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="vm.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
ng-include creates a new scope that inherits the parent (controller) scope through the prototype chain. In javascript you can't replace the value of the shadowed inherited property. Passing an object works as you're changing a property on a pointer to the object.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
You seem to have misnamed your app variable. Either name westonPhotographyApp photoApp or vice-versa:
var photoApp = angular.module('photoApp', []);
photoApp.controller('PhotoGallery', function($scope) {
$scope.selectedLocation ="home";
}
Anyways, you could improve on your design:
You could use controllerAs syntax. It names your controller and makes it accessible throughout descendant scopes:
Index:
<div ng-controller="PhotoGallery as pgCtrl">
<div>
<ng-switch on="selectedLocation" >
<div ng-switch-when="home" >
<div ng-include="'home.html'"></div>
...
Home:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc1'">
Location 1
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<a href="#" ng-click="pgCtrl.selectedLocation='loc2'">
Location 2
</a>
</div>
</div>
</div>
With your controller:
photoApp.controller('PhotoGallery', function() {
var vm = this;
vm.selectedLocation ="home";
}
I have been using carousel slider in my application and works fine with this code
JS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$scope.stores = ["Emil", "Tobias", "Linus"];
});
CsHtml
<div class="container" ng-app="myApp" ng-controller="offerCtrl">
<div class="dynamicTile">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in stores">
<div id="{{ 'tile' + ($index + 1) }}" class="tile">
<a href="#" class="rippler rippler-default">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" ng-repeat="x in stores" ng-class="{'active': $first}">
<img src="~/assets/images/Stores/{{x.StoreId}}/Product/{{y.ProductId}}.png" class="img-responsive" />
<span class="caption"><i class="fa fa-tags"></i>{{y.ProductName}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row " style="">
<div class="col-sm-12">
Show All
</div>
</div>
</div>
</div>
but when i changed my JS code to fetch data dynamically, carousel stop working i.e. images not sliding.
Problem occur with this jS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$http.get("..//Home/getOffers")
.then(function (response) { $scope.stores = response.data; });
});
What causing the problem ?
I have a view that displays youtube videos. I have 4 screenshots below the embedded player that I would like to use as to select the video to be played. I have used ng-hide/show and ng-style/ng-if in similar situations but I cannot get it to work with this setup.
Plunker
<body ng-controller="MainCtrl">
<div class="col-md-12">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/1hGkTqOYxEk?rel=0&autoplay=0" style="width:100%;height:500px"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/Z2elVurPk5s?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/2ruHn_9FokI?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/D5zoVoL1_LU?rel=0&autoplay=0" style="width:100%;height:500px" ng-hide="true"></iframe>
</div>
</div>
<br />
<div class="col-md-3">
<h4>1st Video (initial video)</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>2nd Video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>3rd video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
<div class="col-md-3">
<h4>4th video</h4>
<img src="http://placehold.it/140x150" ng-click=""/>
</div>
I checked your plunk and found that you forgot ng-app.
Then, create a function inside your controller to show/hide videos
var app = angular.module('ngApp', []);
app.controller('MainCtrl', function($scope) {
$scope.currentVideo = 1;
$scope.setCurrentVideo = function(videoNumber) {
$scope.currentVideo = videoNumber;
};
});
And modify html markup to be like
<!-- IFRAMES -->
<iframe class="..." src="..." style="..." ng-show="currentVideo === 1"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 2"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 3"></iframe>
<iframe class="..." src="..." style="..." ng-show="currentVideo === 4"></iframe>
<!-- BUTTONS -->
<div class="col-md-3">
<h4>1st Video (initial video)</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(1);"/>
</div>
<div class="col-md-3">
<h4>2nd Video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(2);"/>
</div>
<div class="col-md-3">
<h4>3rd video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(3);"/>
</div>
<div class="col-md-3">
<h4>4th video</h4>
<img src="http://placehold.it/140x150" ng-click="setCurrentVideo(4);"/>
</div>
Working plunker.