I am a beginner of angularjs, sorry if i asked silly question.
function getCams(callback){
var media_list = [];
MediaStreamTrack.getSources(function(sourceInfos){
var i=0;
while(i!=sourceInfos.length){
if (sourceInfos[i].kind == 'video'){
var temp = [];
temp.push(sourceInfos[i].id);
temp.push(sourceInfos[i].label);
media_list.push(temp);
}
i++;
}
callback(media_list);
});
}
var app = angular.module('myApp', []).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
app.controller('myCtrl', function($scope, $interval) {
$scope.cams = [];
var checkcams = getCams(function(media_list){
$scope.cams=media_list;
$scope.$apply();
console.log("test");
});
$interval(checkcams, 10000);
});
Above is the code from where i am trying to get the number of cams connected to a system, and trying to update the same in angular js using callback function, In this line
$interval(checkcams, 10000);
I am trying to call that function after every 10 secs but this function run only once after the page load, and not running after every 10 secs.
I already have a look at this question, it wont help me out.
$interval not running, angularjs
getCams is returning nothing hence $interval is not working. This is expected behavior.
You can rewrite your code as
//Wrap getCams call in a function
var checkcams = function(){
getCams(function(media_list){
$scope.cams=media_list;
$scope.$apply();
console.log("test");
});
}
//Call it when view is launched
checkcams();
//set Interval
$interval(checkcams, 10000);
By doing this
var checkcams = getCams(function(media_list){
$scope.cams=media_list;
$scope.$apply();
console.log("test");
});
You have set checkcams to be a variable of whatever getCams returns, not a function.
Try this instead
function checkcams () {
getCams(function(media_list){
$scope.cams=media_list;
$scope.$apply();
console.log("test");
});
}
$interval(checkcams, 10000);
Related
I would like to know how to call the function below without refactoring from another js file.
$(document).ready(function() {
check();
function check () {
setTimeout(function(){
location.reload(true);
}, 10000);
}
});
I saw a question exist for this issue very old one but I cannot understand how to use the answer for my function.
StackOverflow answer from another question
I would like to see an example with my function and the proposed solution from the link.
My example which does not work correctly:
//= require rspec_helper
//= require background_index
//= require sinon
describe("Background Index, timeout after 10s", function() {
// Tweak for testing
var doc_ready = $.readyList[0]();
it ("Reload the location", function(){
clock = sinon.useFakeTimers();
var check = doc_ready.check();
var set_timeout = doc_ready.setTimeout();
/*var stub_check = sinon.stub(check, "check");
var stub_timeout = sinon.stub(timeout, "setTimeout");*/
timedOut = false;
setTimeout(function () {
timedOut = true;
}, 1000);
timedOut.should.be.false;
clock.tick(10010);
timedOut.should.be.true;
clock.restore();
});
});
This is re-written from the answer you pasted.
$(document).ready(check);
function check () {
setTimeout(function(){
location.reload(true);
}, 10000);
}
// In the test file
TestFile.prototype.testDocumentReadyContents = function () {
check();
}
A better way would be to include all the JS-files in your HTML with <script src="./path-to-file"> and then just call the functions in the order you want them to be called.
So I am trying to make load more function.I am fetching data from twitch API and it comes as array of objects.
$scope.loadData = function () {
$http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) {
$scope.myName = response.data.streams;
$scope.link="http://player.twitch.tv/?channel=";
return $scope.x=$scope.x + 9; }); };
//initial load
$scope.loadData();
$scope.myName is array in which data is stored and it is used in ng-repeat.
$scope.x is variable used for offset and after clicking button it is incremented and is used to fetch new streams.So when I click button it removes old 9 streams and loads new 9 streams.I want to keep my old 9 streams and to just add 9 more everytime button is clicked.
See here: https://plnkr.co/edit/TbOf9hkPILJn2snW8D7A Thanks.
If I understood problem well, you should just append your data array instead of replacing it:
$scope.myName = [];
$scope.loadData = function () {
$http.get("https://api.twitch.tv/kraken/streams?limit=9&offset=" + $scope.x).then(function(response) {
// add streams to existing array
Array.prototype.push.apply($scope.myName, response.data.streams);
$scope.link="http://player.twitch.tv/?channel=";
return $scope.x=$scope.x + 9; }); };
//initial load
$scope.loadData();
HERE IS THE SOLUTION OF PLNKR
I've modified Streamovi controller and added load more button at the bottom so you can trigger loading more
app.controller('Streamovi', function($scope, $http) {
var ITEMS_PER_LOAD = 9;
var offset = 0;
$scope.myName = [];
function loadStreams(){
$http.get("https://api.twitch.tv/kraken/streams?limit="+ITEMS_PER_LOAD+'&offset='+offset).then(function(response) {
$scope.myName = $scope.myName.concat(response.data.streams);
$scope.link="http://player.twitch.tv/?channel=";
offset+=ITEMS_PER_LOAD;
});
}
//handler for the "Load More" button in the view.
$scope.loadMore = function(){
loadStreams();
}
//initial Loading
loadStreams();
});
I'm have a timer that polls a server for data every 10 seconds. However, everytime a user switches to another controller, the timer should get destroyed. For some reason it's not happening with my code below. The timer keeps polling the server regardless if I change controllers.
controller.js
$scope.init = function() {
//timer and timer stoper
$scope.counter= 0;
var mytimeout = $timeout($scope.onTimeout, 10000);
$scope.$on('$locationChangeStart', function() {
$timeout.cancel(mytimeout);
});
};
$scope.onTimeout = function() {
//polling server function
$scope.counter++;
var mytimeout = $timeout($scope.onTimeout, 10000);
var increase = 0;
inboxServ.check_newusers().then(function(data) {
if (data == "true") {
$scope.retrieveusers(increase);
}
});
};
It seems like you have a scope issue. You have $scope.init() which creates a timeout (held by mytimeout) and also wires up logic to cancel it if you start to change location. However, the function executed (onTimeout) starts another timeout, but assigns it to a different locally scoped mytimeout.
I would expect it, as is, to cancel the first timeout if you change location within the first 10 seconds, and fail to do so any time after that because the variables are different.
It might be as simple as changing it to something like this:
$scope.init = function() {
//timer and timer stoper
$scope.counter= 0;
$scope.mytimeout = $timeout($scope.onTimeout, 10000);
$scope.$on('$locationChangeStart', function() {
$timeout.cancel($scope.mytimeout);
});
};
$scope.onTimeout = function() {
//polling server function
$scope.counter++;
$scope.mytimeout = $timeout($scope.onTimeout, 10000);
var increase = 0;
inboxServ.check_newusers().then(function(data) {
if (data == "true") {
$scope.retrieveusers(increase);
}
});
};
Currently i am using angular js
I have one get method to get data from server side in default.html page
function bindActiveLoans() {
$http.get(rootUrlSingleEscaped + '/cooperativa/allunfundedloans/?authId=' + userInfo.UserId)
.success(function (response) {
if (response.Loans.length == 0) {
$scope.IsValues = false;
$scope.$apply();
return true;
}
$scope.IsValues = true;
$scope.unfundedLoans = response;
});
};
setInterval(function () {
$scope.$apply(bindActiveLoans());
}, 5000);
The above function helps to get the data from server side method in every 5 seconds.
Here, I have an issue.
Additionally I have some more pages, like
default2.html,default3.html,default4.html,default5.html.
The timer is still running while i navigation default.html page to default1.html page. I want to only that timer running in default.html page.If i go to another page,then the timer should stop. How can we achieve it?
From the angularjs example in the $interval API page.
var interval = $interval(function() {
console.log('say hello');
}, 1000);
$interval.cancel(interval);
With $interval.cancel(var) you can stop the interval and if you want to stop it when navigating to another page you should try something like this.
var interval = null;
module.controller('SomeController', '$interval', function($interval) {
interval = $interval(function() {
...
}, 2000);
}).run(['$rootScope', '$interval', function($rootScope, $interval) {
$rootScope.$on('$routeChangeStart', function() {
$interval.cancel(interval);
});
}]);
You can listen to the $routeChangeStart event and do the clearing of the interval depending on the route parameters,
$scope.$on('$routeChangeStart', function (scope, next, current) {
if(<next is not default.aspx>){
// clear interval here
}
});
call clearInterval function when navigating from default page
e.g.
var myVar = setInterval(function () {
$scope.$apply(bindActiveLoans());
}, 5000);
function myStopFunction()
{
clearInterval(myVar);
}
Call myStopFunction
please help to fix the script. http://jsfiddle.net/k9r4t/
when hovering. button_hover increasing the value of the counter. but the value of the counter is displayed on the screen when the cursor leaves the. button_hover. and the user sees only the initial and final value of the counter.
I would like the user to see the intermediate values
controller code:
var app = angular.module("moduleCounter", []);
app.controller("controllerCounter", function ($scope){
$scope.counter = 0;
$scope.incrementCounter = function(){
$scope.startNext = setInterval(function(){
$scope.counter++;
}, 400);
}
$scope.stopCounter = function(){
clearInterval($scope.startNext);
}
});
Use $timeout , it is Angular's native service:
var app = angular.module("moduleCounter", []);
app.controller("controllerCounter", function ($scope , $timeout){
$scope.counter = 0;
$scope.incrementCounter = function(){
$scope.setTimeout();
}
$scope.setTimeout = function(){
$scope.startNext = $timeout( $scope.counterUp , 400);
}
$scope.counterUp = function(){
$scope.counter++;
$scope.setTimeout();
}
$scope.stopCounter = function(){
$timeout.cancel($scope.startNext);
}
});
JSFiddle: http://jsfiddle.net/cherniv/k9r4t/1/