I have a SPA in Angular. I have a data grid of items. I'd like when an item in the grid is clicked for it to have a particular class applied to it, and then for that item to scroll to the top of the enclosing div.
See Plunkr here: http://plnkr.co/edit/OSPJ5r3P9BHo8YKVtdTT?p=preview
I have the code that applies the class working, but I'm having trouble getting the active (element with class 'open' applied) to scroll to the top of the enclosing div.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.cart = [];
$scope.addToCart = function(index) {
$scope.cart.push(index);
$scope.cartCount = $scope.cart.length;
alert($scope.cartCount);
}
$scope.activeRow = function(index) {
$scope.selectedRow = index;
}
$scope.dataObject = [{
"Number": "001",
"Status": "NCB",
"Compound": "CD19A"
}, {
"Number": "002",
"Status": "NCA",
"Compound": "CD19B"
}, {
"Number": "003",
"Status": "NCR",
"Compound": "CD33C"
}, {
"Number": "004",
"Status": "NCX",
"Compound": "CD33D"
}, {
"Number": "005",
"Status": "NCT",
"Compound": "CD33E"
}, {
"Number": "006",
"Status": "NC9",
"Compound": "CD20F"
}, {
"Number": "007",
"Status": "NC8",
"Compound": "CD20G"
}, {
"Number": "008",
"Status": "NCX",
"Compound": "CD20H"
}, {
"Number": "009",
"Status": "NCY",
"Compound": "CD33I"
}, {
"Number": "010",
"Status": "NCT",
"Compound": "CD33J"
}
];
});
/* Put your css in here */
body {
background: #eee;
}
div.cart {
display: block;
height: 70px;
background: silver;
margin-left: 20px;
width: 200px;
padding: 5px 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.cart h1 {
color: #fff;
line-height: 20px;
}
.item-list-wrapper {
height: 300px;
width: 740px;
border: 1px solid #ddd;
overflow-y: scroll;
margin-left: 20px;
}
.item-list {
height: 70px;
width: 100%;
margin-bottom: 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
background: #efefe4;
}
li {
display: inline-block;
list-style: none;
padding: 0 40px 40px 40px;
font-size: 24px;
}
.open {
height: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-view=""></div>
<div class="cart">
<h1>Cart: {{cartCount}}</h1></div>
<div class="item-list-wrapper">
<div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
<ul>
<li>{{data.Number}}</li>
<li>{{data.Status}}</li>
<li>{{data.Compound}}</li>
<li>
Add to Cart
</li>
</ul>
</div>
</div>
<!--item-list-wrapper -->
</body>
</html>
Looks like I can get this working using $anchorScroll to move to the given element using an anchor ID.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.cart = [];
$scope.addToCart = function(index) {
$scope.cart.push(index);
$scope.cartCount = $scope.cart.length;
alert($scope.cartCount);
}
$scope.activeRow = function(index) {
$scope.selectedRow = index;
$location.hash();
$anchorScroll('anchor-' + index);
}
$scope.dataObject = [{
"Number": "001",
"Status": "NCB",
"Compound": "CD19A"
}, {
"Number": "002",
"Status": "NCA",
"Compound": "CD19B"
}, {
"Number": "003",
"Status": "NCR",
"Compound": "CD33C"
}, {
"Number": "004",
"Status": "NCX",
"Compound": "CD33D"
}, {
"Number": "005",
"Status": "NCT",
"Compound": "CD33E"
}, {
"Number": "006",
"Status": "NC9",
"Compound": "CD20F"
}, {
"Number": "007",
"Status": "NC8",
"Compound": "CD20G"
}, {
"Number": "008",
"Status": "NCX",
"Compound": "CD20H"
}, {
"Number": "009",
"Status": "NCY",
"Compound": "CD33I"
}, {
"Number": "010",
"Status": "NCT",
"Compound": "CD33J"
}
];
});
/* Put your css in here */
body {
background: #eee;
}
div.cart {
display: block;
height: 70px;
background: silver;
margin-left: 20px;
width: 200px;
padding: 5px 10px;
margin-bottom: 20px;
margin-top: 20px;
}
.cart h1 {
color: #fff;
line-height: 20px;
}
.item-list-wrapper {
height: 300px;
width: 740px;
border: 1px solid #ddd;
overflow-y: scroll;
margin-left: 20px;
}
.item-list {
height: 70px;
width: 100%;
margin-bottom: 10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border: 1px solid #fff;
background: #efefe4;
}
li {
display: inline-block;
list-style: none;
padding: 0 40px 40px 40px;
font-size: 24px;
}
.open {
height: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-view=""></div>
<div class="cart">
<h1>Cart: {{cartCount}}</h1></div>
<div class="item-list-wrapper">
<div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
<a id="anchor-{{$index}}"></a>
<ul>
<li>{{data.Number}}</li>
<li>{{data.Status}}</li>
<li>{{data.Compound}}</li>
<li>
Add to Cart
</li>
</ul>
</div>
</div>
<!--item-list-wrapper -->
</body>
</html>
Related
Hi everyone Im trying to add a save button to my quill text editor (code below). I have it typing out to HTML but now I need to have a button that saves it and also a button on a different page that can reload the same thing. I have not found enough information on this that isn't super specific or relates to my project.
Also the text is printing on screen aswell in a "HTML" format and I cant figure out how to get it logging without printing that on screen but this is secondary.
Thank You
{% load static %}
<HTML>
<head>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<link rel="stylesheet" href="{% static "css/text_editor.css" %}">
<meta charset="UTF-8">
<title>Collapsible Sidebar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static "css/side.css" %}">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="blue">
<div class="nav-wrapper">
Logo
<a href="/signup/front_page" class="header__image" style="color: orange"><i class="material-
icons">landscape</i></a>
<ul class="right brand-logo">
<li>Sass</li>
<li>Components</li>
<li>Account</li>
<li>LOGOUT</li>
</ul>
</div>
</nav>
</head>
<div class="container" id="editor-container">
<body>
<div id="editor" style=height: 200px></div>
<div id="editor style="height: 200px"></div>
</body>
<div class="container javascript" id="delta-container"></div>
<script>
var toolbarOptions = [
[{ 'font': [] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic'],
[{ 'align': [] }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'color': [] }, { 'background': [] }],
[ 'image', 'link', 'video' ],
['blockquote'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
['clean'] // remove formatting button
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function logHtmlContent() {
console.log(quill.root.innerHTML);
}
quill.on('text-change', update);
var container = document.querySelector('#delta-container');
update();
function update(delta) {
var contents = quill.getContents();
console.log('contents', contents);
var html = "contents = " + JSON.stringify(contents, null, 2);
if (delta) {
console.log('change', delta)
html = "change = " + JSON.stringify(delta, null, 2) + "\n\n" + HTML;
}
container.innerHTML = HTML;
hljs.highlightBlock(container);
}
</script>
</html>
html,body {
margin: 50;
height: 95%;
}
#container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#editor-container {
height: 100%;
/* added these styles */
flex: 1;
display: flex;
flex-direction: column;
}
#editor {
height: 100%;
/* added these styles */
flex: 1;
overflow-y: auto;
top: 0px;
width: 100%;
}
.container:first-child {
border-right: 0px;
}
I have a single page app with vertical tables to the left. I'm able to to click on each tab and the expected content is showing. The problem I'm having is I'm not able to programmatically change the ng-checked to "true" for the selected tab and "false" for the unselected tab. Because of this the selected tab is always on the first tab in the list of tabs. I've provided all the codes (6 files) to run this app so you can see what im talking about
Index.html
<html ng-app= "mainApp">
<head>
<title>OneilAndK</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/uxcore.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="routing.js"></script>
<link rel="stylesheet" href="verticalTab.css" rel="stylesheet"/>
</head>
<body>
<div class="tabordion">
<section id="section1">
<input type="radio" name="sections" id="option1" ng-checked = true >
<label ui-sref="About" for="option1">About</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section2">
<input type="radio" name="sections" id="option2" ng-checked = false >
<label ui-sref="Knowledge" for="option2" >Knowledge</label>
<article>
<div ui-view></div>
</article>
</section>
<section id="section3">
<input type="radio" name="sections" id="option3" ng-checked = false >
<label ui-sref="Contact" for="option3" >Contact</label>
<article>
<div ui-view></div>
</article>
</section>
</div>
</body>
</html>
About.html
<p >This is my about page</p>
Contact.html
<p >This is my Contact page</p>
Knowledge.html
<p >This is my knowledge page</p>
routing.js
var app = angular.module('mainApp', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("Home.html")
$stateProvider
.state('Contact', {url:"/Contact",templateUrl:"Contact.html"})
.state('Knowledge', {url:"/Knowledge",templateUrl:"Knowledge.html"})
.state('About', {url:"/About",templateUrl:"About.html"})
}]);
verticalTab.css
h1 {
color: #333;
font-family: arial, sans-serif;
margin: 1em auto;
width: 80%;
}
.tabordion {
color: #333;
display: block;
font-family: arial, sans-serif;
margin: auto;
position: relative;
width: 80%;
}
.tabordion input[name="sections"] {
left: -9999px;
position: absolute;
top: -9999px;
}
.tabordion section {
display: block;
}
.tabordion section label {
background: #ccc;
border:1px solid #fff;
cursor: pointer;
display: block;
font-size: 1.2em;
font-weight: bold;
padding: 15px 20px;
position: relative;
width: 180px;
z-index:100;
}
.tabordion section article {
display: none;
left: 230px;
min-width: 300px;
padding: 0 0 0 21px;
position: absolute;
top: 0;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-229px;
position: absolute;
top: 0;
width: 220px;
z-index:1;
}
.tabordion input[name="sections"]:checked + label {
background: #eee;
color: #bbb;
}
.tabordion input[name="sections"]:checked ~ article {
display: block;
}
#media (max-width: 533px) {
h1 {
width: 100%;
}
.tabordion {
width: 100%;
}
.tabordion section label {
font-size: 1em;
width: 160px;
}
.tabordion section article {
left: 200px;
min-width: 270px;
}
.tabordion section article:after {
background-color: #ccc;
bottom: 0;
content: "";
display: block;
left:-199px;
position: absolute;
top: 0;
width: 200px;
}
}
#media (max-width: 768px) {
h1 {
width: 96%;
}
.tabordion {
width: 96%;
}
}
#media (min-width: 1366px) {
h1 {
width: 70%;
}
.tabordion {
width: 70%;
}
}
I would use angular-ui-bootstrap to create tab panels. And for dynamically generating the tab headings you can use stateHelper module.
With stateHelper you can create a configuration object that you can also use inside a ng-repeat to generate the navbar of the tab panel.
The only tricky thing to make it work is the $stateChangeStart listener to calculate the index for the active route. Once the index is found it will be passed to ui-bootstrap via $rootScope.active variable.
Please have a look at the demo below or this jsfiddle.
angular.module('demoApp', ['ui.router', 'ui.bootstrap', 'ui.router.stateHelper'])
.run(['$state', '$rootScope', 'TABS_CONFIG', function($state, $rootScope, TABS_CONFIG) {
// run needed to set the correct tab-index on load
var tabs = TABS_CONFIG.children;
$rootScope.$on('$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
angular.forEach(tabs, function(item, index) {
if (item.name == toState.name) {
$rootScope.active = index;
}
});
});
}])
.constant('TABS_CONFIG', {
name: 'tabs',
templateUrl: 'tabs.html',
abstract: true,
children: [{
url: '/about',
name: 'about',
template: '<div class="container"><h1>about</h1></div>'
//templateUrl: 'about.html'
}, {
url: '/contact',
name: 'contact',
template: '<div class="container"><h1>contact</h1></div>'
//templateUrl: 'contact.html'
}, {
url: '/knowhow',
name: 'know-how',
template: '<div class="container"><h1>knowhow</h1></div>'
//templateUrl: 'knowhow.html'
},
]
})
.controller('mainController', function($scope, $state, TABS_CONFIG) {
$scope.tabs = TABS_CONFIG.children;
$scope.go = function(tab) {
//$scope.active = $scope.tabs.indexOf(tab);
$state.go(tab.name);
};
})
.config(routes);
function routes($urlRouterProvider, stateHelperProvider, TABS_CONFIG) {
$urlRouterProvider.otherwise('/contact');
stateHelperProvider.state(TABS_CONFIG, {
keepOriginalNames: true
});
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.2/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdn.rawgit.com/marklagendijk/ui-router.stateHelper/master/statehelper.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<div ui-view></div>
<script type="text/ng-template" id="tabs.html">
<uib-tabset active="active">
<uib-tab index="$index" ng-repeat="tab in tabs" ng-click="go(tab)">
<uib-tab-heading>{{tab.name}}</uib-tab-heading>
<div ui-view></div>
</uib-tab>
</uib-tabset>
</script>
</div>
I'm trying to make a video player application using OnSen UI (https://onsen.io) and Videogular (http://www.videogular.com/). When i used together the video controllers of videogular is not working. Following are my code.
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="list_with_header.css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script>
<script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script>
<script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script>
<script>
ons.bootstrap();
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
.playlist ul {
list-style-type: none;
}
.playlist ul a {
cursor: pointer;
color: #428bca;
text-decoration: none;
}
.playlist ul a:visited {
color: #428bca;
}
.playlist ul a:hover {
color: #428bca;
text-decoration: underline;
}
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
.videogular-container .skipButton {
position: absolute;
padding: 10px;
top: 10px;
right: 10px;
z-index: 99999;
color: white;
cursor: pointer;
background-color: #666666;
border: 2px #FFFFFF solid;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
#media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
.videogular-container.audio {
width: 1170px;
height: 50px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
.videogular-container.audio {
width: 728px;
height: 50px;
}
}
</style>
<script>
'use strict';
angular.module('DemoAppVideo',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.buffering"
]
)
.controller('HomeCtrl',
["$sce", "$timeout", function ($sce, $timeout) {
var controller = this;
controller.state = null;
controller.API = null;
controller.currentVideo = 0;
controller.onPlayerReady = function(API) {
controller.API = API;
};
controller.onCompleteVideo = function() {
controller.isCompleted = true;
controller.currentVideo++;
if (controller.currentVideo >= controller.videos.length) controller.currentVideo = 0;
controller.setVideo(controller.currentVideo);
};
controller.videos = [
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
]
},
{
sources: [
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}
]
}
];
controller.config = {
preload: "none",
autoHide: false,
autoHideTime: 3000,
autoPlay: false,
sources: controller.videos[0].sources,
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
controller.setVideo = function(index) {
controller.API.stop();
controller.currentVideo = index;
controller.config.sources = controller.videos[index].sources;
$timeout(controller.API.play.bind(controller.API), 100);
};
}]
);
</script>
<ons-tabbar>
<ons-tab page="home.html" label="Home" icon="ion-home" active="true"></ons-tab>
<ons-tab page="comments.html" label="Comments" icon="ion-chatbox-working"></ons-tab>
<ons-tab page="tags.html" label="Tags" icon="ion-ios-pricetag"></ons-tab>
<ons-tab page="settings.html" label="Settings" icon="ion-ios-cog"></ons-tab>
</ons-tabbar>
<ons-template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Artists</div>
<div class="right" style="line-height: 44px"> Right </div>
</ons-toolbar>
<div ng-app="DemoAppVideo">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
<videogular vg-player-ready="controller.onPlayerReady($API)" vg-complete="controller.onCompleteVideo()" vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.config.sources"
vg-tracks="controller.config.tracks"> </vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
<div class="playlist">
<ul>
<li><a ng-click="controller.setVideo(0)">Pale Blue Dot</a></li>
<li><a ng-click="controller.setVideo(1)">Big Buck Bunny</a></li>
</ul>
</div>
</div>
</div>
</ons-page>
</ons-template>
Error Code I received.
"Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined
You are loading AngularJS twice with ons.bootstrap and then with angular.module('DemoAppVideo', []), so it's probably not taking the second part. Read about ons.bootstrap function here.
Basically, you can do it the Angular way (remember to add 'onsen'):
<script>
// Assume 'ng-app' is defined as 'my-app'
var module = angular.module('my-app', ['onsen', 'ngAnimate']);
module.controller('AppController', function($scope) { });
</script>
Or you can use ons.bootstrap instead:
<script>
// No need to define 'ng-app'
var module = ons.bootstrap(['ngAnimate']);
module.controller("AppController", function($scope){ });
</script>
Its Fixed by initializing onsen in Angular way,
var module = ons.bootstrap('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
]);
I have some dummy data in a mainMenu.json which will server to populate a list which will be the first template loaded by angular framework when app starts.
chrome console reporting no errors.
But I get a white "blank" page "right image" and not sure where I went wrong. Thanks
//mainMenu.json
[{
"name": "item1",
"image": "item1_"
}, {
"name": "item2",
"image": "item2_"
}, {
"name": "item3",
"image": "item3_"
}]
//--------------------------------------------------------------------
//app.js
var myApp = angular.module('myApp', [
'ngRoute', //turn on deep linking
'appControllers' //js to handle the route
]);
//Configure how the partials are going to run
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/mainMenu.html',
controller: 'MainMenuCtrl'
}).otherwise({ //home page
redirectTo: '/list'
});
}]);
//--------------------------------------------------------------------
// controlers.js
var appControllers = angular.module ('appControllers', []);
appControllers.controller ('MainMenuCtrl', ['$scope', '$http', function ($scope, $http){
$http.get('js/mainMenu.json').success (function (data){
$scope.menuItems = data;
});
}]);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
main {
margin-top: 40px;
margin-bottom: 40px;
padding: 0.5em;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
footer > button {
font-size: 1em;
padding: 0.5em 1em;
}
input {
font-size: 1em;
width: 100%;
}
header, footer {
background-color: white;
}
footer > button {
padding: 0.5em 1em;
width: 31.33%;
margin: 0 1%;
float: left;
box-sizing: border-box;
}
<!--index.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main ng-view></main>
<footer>
<button class="menuLeft" type="button" >NO</button>
<button class="menuLeft" type="button" >EXTRA</button>
<button class="menuRight" type="button">YES</button>
</footer>
</body>
</html>
//--------------------------------------------------------------------
<!--mainMenu.html-->
<section>
<ul>
<li ng-repeat="item in menuItems">
<br/>
<p>dummy</p>
<h2>{{item.name}}</h2>
</li>
</ul>
</section>
You have an error in your code
var appControllers = angularModule ('appControllers', []);
It should be
var appControllers = angular.module ('appControllers', []);
To catch an error on $http.get promise do something like this :
$http.get(your_options).then(function(data){
}, function(err){
});
First function is your success callback and the second one is your error callback. More about $http can be found HERE
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"th.co.softever.videogular.plugins.quality"
]
)
.controller('HomeCtrl',
["$sce", function ($sce) {
this.config = {
preload: "none",
qualitySources: [
{
name: '720p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular720.mp4"), type: "video/mp4"}
],
dashIndex: 3
},
{
name: '480p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular480.mp4"), type: "video/mp4"}
],
dashIndex: 2
},
{
name: '360p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular360.mp4"), type: "video/mp4"}
],
dashIndex: 1
},
{
name: '240p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular240.mp4"), type: "video/mp4"}
],
dashIndex: 0
} /*,
{
name: 'Auto',
sources: [
{src: "https://dl.dropboxusercontent.com/u/8274898/videogular/dash/videogular.mpd"}
]
} */
],
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
controls: {
autoHide: false,
autoHideTime: 5000
}
}
};
this.currentQualitySource = this.config.qualitySources[this.config.qualitySources.length - 1];
}]
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="sparta/dash.all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="sparta/vg-controls.js"></script>
<script src="sparta/vg-overlay-play.js"></script>
<script src="sparta/vg-poster.js"></script>
<script src="sparta/vg-buffering.js"></script>
<script src="sparta/vg-dash.js"></script>
<script src="sparta/mulit.js"></script>
<script src="sparta/vg-quality.js"></script>
<link rel="stylesheet" href="sparta/vg-quality.css">
</head>
<body ng-app="myApp">
<div ng-controller="HomeCtrl as controller" class="videogular-container">
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.currentQualitySource.sources" vg-dash>
</vg-media>
<vg-controls vg-autohide="controller.config.plugins.controls.autoHide" vg-autohide-time="controller.config.plugins.controls.autoHideTime">
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-time-display>{{ totalTime | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-quality quality-sources="controller.config.qualitySources" default-quality="controller.currentQualitySource"></vg-quality>
<vg-playback-button></vg-playback-button>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
</videogular>
</div>
</body>
</html>
I wanted to create a simple video player and for that I have used the Videogular for it. since my requirement included to have a different resolutions video so I used the vg-quality plugin but with this plugin my other controls are not coming and I m not been able to track the Issue
This is the only error coming and also the video is not playing nor any controls are coming in the chrome browser the mozilla is showing the video on the right mouse click with play button but still the actual controls are not coming
Well Atlast I corrected the issue and the working example is here
'use strict';
angular.module('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
"com.2fdevs.videogular.plugins.dash",
"com.2fdevs.videogular.plugins.overlayplay",
"com.2fdevs.videogular.plugins.poster",
"com.2fdevs.videogular.plugins.buffering",
"th.co.softever.videogular.plugins.quality"
]
)
.controller('HomeCtrl',
["$sce", function ($sce) {
var controller = this;
controller.API = null;
controller.config = {
preload: "none",
qualitySources: [
{
name: '720p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular720.mp4"), type: "video/mp4"}
],
dashIndex: 3
},
{
name: '480p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular480.mp4"), type: "video/mp4"}
],
dashIndex: 2
},
{
name: '360p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular360.mp4"), type: "video/mp4"}
],
dashIndex: 1
},
{
name: '240p',
sources: [
{src: $sce.trustAsResourceUrl("https://dl.dropboxusercontent.com/u/8274898/videogular/videogular240.mp4"), type: "video/mp4"}
],
dashIndex: 0
},
{
name: 'Auto',
sources: [
{src: "https://dl.dropboxusercontent.com/u/8274898/videogular/dash/videogular.mpd"}
]
}
],
autoHide: false,
autoHideTime: 3000,
autoPlay: false,
theme: {
url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"
},
plugins: {
poster: "http://www.videogular.com/assets/images/videogular.png"
}
};
this.currentQualitySource = this.config.qualitySources[this.config.qualitySources.length - 1];
}]
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.min.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="sparta/vg-overlay-play.js"></script>
<script src="sparta/vg-poster.js"></script>
<script src="sparta/vg-buffering.js"></script>
<script src="sparta/dash.all.js"></script>
<script src="sparta/vg-dash.js"></script>
<script src="sparta/main.js"></script>
<script src="sparta/vg-quality.js"></script>
<script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script>
<script src="sparta/vg-quality.js"></script>
<link rel="stylesheet" href="sparta/vg-quality.css">
<link rel="stylesheet" href="sparta/vg-quality.css">
<link rel="stylesheet" href="sparta/videogular.css">
<style>
html, body {
margin: 0;
padding: 0;
}
.playlist ul {
list-style-type: none;
}
.playlist ul a {
cursor: pointer;
color: #428bca;
text-decoration: none;
}
.playlist ul a:visited {
color: #428bca;
}
.playlist ul a:hover {
color: #428bca;
text-decoration: underline;
}
.videogular-container {
width: 100%;
height: 320px;
margin: auto;
overflow: hidden;
}
.videogular-container .skipButton {
position: absolute;
padding: 10px;
top: 10px;
right: 10px;
z-index: 99999;
color: white;
cursor: pointer;
background-color: #666666;
border: 2px #FFFFFF solid;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
#media (min-width: 1200px) {
.videogular-container {
width: 1170px;
height: 658.125px;
}
.videogular-container.audio {
width: 1170px;
height: 50px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.videogular-container {
width: 728px;
height: 409.5px;
}
.videogular-container.audio {
width: 728px;
height: 50px;
}
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="HomeCtrl as controller">
<div class="videogular-container">
<videogular vg-theme="controller.config.theme.url">
<vg-media vg-src="controller.currentQualitySource.sources" >
</vg-media>
<vg-controls>
<vg-play-pause-button></vg-play-pause-button>
<vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
</vg-scrub-bar>
<vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>
<vg-volume>
<vg-mute-button></vg-mute-button>
<vg-volume-bar></vg-volume-bar>
</vg-volume>
<vg-quality quality-sources="controller.config.qualitySources" default-quality="controller.currentQualitySource"></vg-quality>
<vg-fullscreen-button></vg-fullscreen-button>
</vg-controls>
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-poster vg-url='controller.config.plugins.poster'></vg-poster>
</videogular>
</div>
</div>
</div>
<style>
videogular my-replay-plugin {
position: absolute;
z-index: 50;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
videogular my-replay-plugin div {
background-color: #000000;
width: 100%;
height: 100%;
}
videogular my-replay-plugin div span {
color: white;
cursor: pointer;
font-family: 'trebuchet ms', verdana, arial;
font-size: 36px;
display: table;
position: absolute;
text-align: center;
margin: auto;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</body>
</html>