I'm looking on how to stop an iFrame video with angular js !
I'm new to Angularjs and I'm not able to do that, I could do that with jQuery :
var TheFrame;
$(document).on( "pagebeforehide", function( event, data ) {
TheFrame = $(event.target).find("iframe");
setTimeout(StopVideo, 500);
});
function StopVideo(){
var vid = TheFrame.prop("src");
TheFrame.prop("src", "");
TheFrame.prop("src", vid);
}
So if you have an idea on how to do that when clicking on button for example that would be great
Related
My angular JS application has a view button. When clicking on the view button, it will call method and that method changes the content in the same page. Now I have a request that when clicking on the view button, it has to open in a new tab and display the contents.
Previous code:
HTML:
<md-button ng-click="ctrl.ViewClick(item)">View</md-button>
Controller:
vm.ViewClick = function(item) {
// The browser URL is same but it is a new page with the new contents.
// Calls a angular js service and loads the contents
}
Now, I need to call that function in new browser tab.
I made the following changes but didn't worked. Can you please help me on this.
HTML:
<md-button ng-click="ctrl.NewTabClick(item)">View</md-button>
Controller:
vm.newTabClick = function(item){
$Window.open($location.absURL(), 'blank');
// How do I call vm.ViewClick function after opening the new browser window?
};
This is the old angular JS. Thanks for helping on this.
On workaround you can do in this case is, While opening the page pass query parameter in the URL.
vm.newTabClick = function(item){
// Add `viewLink=true` query parameter with true value
$Window.open($location.absURL() + '&viewLink=true', 'blank');
// Store item in sessionStorage
window.sessionStorage.setItem('item', JSON.stringify(item));
}
And then from the component where you want to call the parameter. You can write below code on $onInit lifecycle hook.
vm.$onInit = function () {
// Inject $routeParams in dependency areay
const storedItem = sessionStorage.getItem('item')
if ($routeParams.viewLink == 'true' && storedItem && storedItem != 'null') {
vm.viewLink(JSON.parse(storedItem));
}
}
I am using Angular js with ASP.NET MVC and file upload done using codepen method.
It is running fine because I want to store the binary array so I can convert later and set it back.
But the problem I am facing is to validate the selected thing is image or not!
I can't find the way how can I check the selected thing is image or not?
Anyone have any idea about this?
I have also used parsley js for validation but it is angular js here also how can I use parsley to validate the selected thing is image or not or manually?
angular.module('starter', [])
.controller('Ctrl', function($scope) {
$scope.data = {}; //init variable
$scope.click = function() { //default function, to be override if browser supports input type='file'
$scope.data.alert = "Your browser doesn't support HTML5 input type='File'"
}
var fileSelect = document.createElement('input'); //input it's not displayed in html, I want to trigger it form other elements
fileSelect.type = 'file';
if (fileSelect.disabled) { //check if browser support input type='file' and stop execution of controller
return;
}
$scope.click = function() { //activate function to begin input file on click
fileSelect.click();
}
fileSelect.onchange = function() { //set callback to action after choosing file
var f = fileSelect.files[0], r = new FileReader();
if(f.type === 'image/jpeg' || f.type === 'image/png') {
console.log('The file type is ' + f.type);
// do something here
} else {
console.log('The file type is ' + f.type);
// do some other thing here
}
r.onloadend = function(e) { //callback after files finish loading
$scope.data.b64 = e.target.result;
$scope.$apply(); console.log($scope.data.b64.replace(/^data:image\/(png|jpg);base64,/, "")); //replace regex if you want to rip off the base 64 "header"
//here you can send data over your server as desired
}
r.readAsDataURL(f); //once defined all callbacks, begin reading the file
};
});
or you can dynamically set accept="image/*" attribute to your html element.
check here
I have an Ionic App where from side menu click it will go to page A and from there on certain action it will go to Page B and I need back button on all the pages which will navigate it back to mobile app.
I tried this code
$scope.goOut= function () {
//$scope.showLoading($ionicLoading);
var url = "https://www.google.com";
var target = '_blank';
var options = ['location=no','hardwareback=yes','toolbarposition=top', 'toolbar=yes','enableViewportScale=yes',
'transitionstyle=fliphorizontal',
'closebuttoncaption=Back to the App'];
var ref = cordova.InAppBrowser.open(url, target, options.join());
ref.addEventListener("loadstop",function () {
$scope.hide($ionicLoading);
});
};
But this is not showing me anything on the inappbrowser.
I must be doing something horribly wrong? and its not even showing loading?
I'm using AngularJs and i upload video dynamically but not every video playing just after 4-5 refresh of browser everything is fine (video must displaying when mouse is on video)
$timeout(function() {
var video = element.find('video');
video.hide();
if (!video.length) {
return;
}
video.find('source').attr('src', '/files/' + scope.game.videoPoster);
element.on('mouseover', function() {
video.show();
video[0].play();
});
element.on('mouseout', function() {
video.hide();
video[0].pause();
});
}, 1);
Can anyone explain how to fix it?
I have a Cordova plugin that do some webservice thinks, and i want it to make a call a angular factory function on the WebView using the sendJavascript android command.
I have another project where it works without angularjs.
AngularJS factory
....
.factory('playerService', function(){
var title = "Tryk på play";
var setTitle = function(t) {
title = t;
}
var getTitle = function() {
return title;
}
return {
setTitle : setTitle,
getTitle : getTitle
}
})
....
Cordova plugin
....
cordova.webView.sendJavascript("javascript: playerService.setTitle('test test');
....
I got a "playerService" is not defined - in the logcat android output.
Finally i got a solution ...
1) First i got to select a element in the DOM witch is in the scope. In my example i have an div with the ID playbuttons
cordova.webView.sendJavascript("javascript: angular.element(document.querySelector('#playbuttons')).scope().$apply(function() {angular.element(document.querySelector('#playbuttons')).scope().playerService.setTitle('TESTING')})");
I think this i very hacky, so if anyone can correct me, the feel free ;)