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/
Related
How can I check if I have to stop calling the loadMore() function, because all the documents have already been loaded from the database?
In the example below I'm using Ionic, but it's the same also with ng-infinite-scroll in AngularJS apps.
This is my actual code:
HTML:
...
<ion-infinite-scroll
ng-if="!noMoreItemsToLoad"
on-infinite="loadMore()"
distance="5%">
</ion-infinite-scroll>
</ion-content>
JS Controller:
$scope.loadMore = function(){
console.log('Loading more docs...');
Items.loadMore(); // calling the .next() method inside the Items service
if( !Items.hasNext()) { $scope.noMoreItemsToLoad = true; }
$scope.$broadcast('scroll.infiniteScrollComplete');
}
JS Items Factory:
.factory('Items', function (FIREBASE_URL, $firebaseArray, $firebaseObject) {
var itemsRef = new Firebase(FIREBASE_URL + 'items/');
var scrollRef = new Firebase.util.Scroll(itemsRef, 'name');
var self = {
getAllItems : function(){ ... },
loadMore: function(){
scrollRef.scroll.next(4);
},
hasNext: function(){
if(scrollRef.scroll.hasNext()) { return true; }
else { return false; }
}
}
return self;
}
Do the scroll.next in timeout, for example:
loadMore: function(){
$timeout(function() {
scrollRef.scroll.next(4);
});
},
I had the same issue and I think the solution is to modify the hasNext() function on firebase.util.js:
Cache.prototype.hasNext = function() {
return this.count === -1 || this.endCount >= this.start + this.count;
};
I put a missing equal sign (=) before this.start
I hope it works for you.
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);
controller 1 where we set value
$scope.view = function() {
$scope.usethis = "&1=test";
$localStorage.change = $scope.usethis;
}
Now in my second controller I grab the value to update:
$scope.Data = function() {
var URL;
$scope.update = $localStorage.change;
URL = "?test";
if ($scope.update){
URL = "?test" + $scope.update;
}
}
and finally my watcher:
$scope.$watch(function () { return $localStorage.change; },function(newVal,oldVal) {
if(oldVal!==newVal) {
$scope.update = newVal;
} }) ;
On page refresh I can update the query, it uses the values as required. However it does not update without a refresh, so wondering if an issue with the watcher.
Here is my code brief:
controller:
angular.module('testApp').controller('TestCtrl', function ($scope, EssayRsc, EssaySvc) {
$scope.pageInfo = EssaySvc;
}
service:
angular.module('testApp').service('EssaySvc', function (EssayRsc, $document, $rootScope) {
var count = 1;
var essayList = [{title:11111},{title:11111},{title:11111},{title:11111},{title:11111},{title:11111},{title:11111}];
var pageNum = null;
var pages = null;
$document.scroll(function () {
if ($document.height() == ($document.scrollTop() + angular.element(window).height())) {
EssayRsc.get({pageSize:count}, function (resp) {
essayList = essayList.concat(resp.list);
pageNum = resp.pageNum;
pages = resp.pages;
this.essayList = essayList;
// this changes here but not changes in the controller
console.log(this.essayList);
});
}
});
this.essayList = essayList;
this.pageNum = pageNum;
this.pages = pages;
})
html:
<ul class="no-bullet" ng-repeat="essay in pageInfo.essayList">
<li class="essay-query-li" ng-click="viewEssay(essay.id)">{{essay.title}}</li>
</ul>
This is my question:
I want to set a listener in a service,so erverytime I scroll to the bottom of the window it can load one record.
but everytime essayList attribute in the service changed,but in the controller and view it never change, i really cannot figure out why and how to solve it,if you know the answer please tell me, thanks a lot!
The value of image isn't updated in the UI, even though the scope variable is changed.
Main Controller :
$scope.TVuploadModal = function($files) {
$scope.TvTemp.file = $files[0];
$scope.TvTemp.fileName = $files[0].name
var fileReader = new FileReader();
fileReader.readAsDataURL($scope.TvTemp.file);
fileReader.onload = function(e) {
$timeout(function() { $scope.TvTemp.file.dataUrl = e.target.result; });
};
$scope.ResourceOpenBannerImageCrop('lg');
}
$scope.ResourceOpenBannerImageCrop = function(size) {
$modal.open({ templateUrl: 'BannerImageCrop.html', controller: 'resourceBannerImageCropCtrl', backdrop: 'static', size: size, scope: $scope,
resolve: {
TVImages: function () {
return $scope.TVImages;
}
}
}).result.then(function(images) {
console.log("Hello.....");
console.log($scope.TVImages);
/*$scope.TVImages = images;*/ });
};
resourceBannerImageCropCtrl :
app.controller('resourceBannerImageCropCtrl', function($scope,$rootScope,TVImages,$routeParams, $modalInstance, $location, $upload,ResourceAdditionStepsUpdateService,mediaUploadService) {
$scope.myCroppedImage = '';
$scope.TVImages1 = TVImages;
$scope.showSpinner = false;
$scope.imageCrop = function() {
$scope.showSpinner = true;
var requestMap = { imagedata:$scope.myCroppedImage, fileName:$scope.TvTemp.fileName, fileType:"Resource Images", userId: $rootScope.currentLoggedInUserId }
var saveResourceImages = mediaUploadService.saveImagesToUserBucket(requestMap, function(response) {
$scope.showSpinner = false;
if (response.isSuccess) {
var image = {}
image.uniqueKey = response.data.uniqueKey
image.fileUrl = response.data.url
image.fileType = "Resource Images"
image.description = $scope.description
image.type = "IMAGE"
image.s3UploadStatus = response.data.s3UploadStatus
ResourceAdditionStepsUpdateService.saveResourceImages({resourceId : $scope.resourceMetadata.resourceData.id , image : image},function(response){
console.log(response.data.mediaList);
$scope.showSpinner = false;
if(response.isSuccess){
$scope.TVImages1 = [];
$scope.TVImages1 = response.data.mediaList;
if (!$scope.$$phase) {
$scope.$apply();
}
}
});
$modalInstance.close(/*$scope.volcareTVImages*/);
}
})
};
$scope.cancel = function() { $modalInstance.dismiss('cancel'); };
});
HTML:
<div class="col-sm-4 mb20" ng-repeat="image in TVImages">
//content
</div>
I am passing the scope variable (i.e $scope.TVImages) in resolve as you can see in the code I am updating the $scope.TVImages1.
As per my understanding of two way data binding, if $scope.TVImages1 is updated, then $scope.TVImages should also update via the resolve.
I also tried using $scope.$apply, but that didn't work.
What am I doing wrong?
Qasim,
Some days ago, I was also facing this kind of issue while updating the value of $scope variable which is assigned as ng-repeat variable in the the view.
Could you please try to use following line instead of $scope.TVImages
$rootScope.TVImages that will update the view variable.
Please let me know if you still facing some problem.