We Keep Coding

AngularJS Timer doesn't work with Ajax Data

I have to pages, where one is screen.php witch shows a table with data pulled from data.php with 2 seconds interval.
In screen.php data is being pulled like this:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('.container').load('data.php');
}, 2000);
});
After this i have made a AngularJS Timer app :
angular.module('MyApp', ['timer'])
.controller('MyAppController', ['$scope', function ($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, args) {
console.log('timer-stopped args = ', args);
});
}]);
The data returned bu the first script (from data.php) is in this format:
XXX XXXXXXXXXX XXXXXXXXX XXXXXXXX {{minutes}} : {{seconds}}
Witch should convert the {{minutes}} : {{seconds}} , in 00:00 , since in the datatest.php the filed is :
<timer start-time="<?php echo $dt; ?>">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
I know this might be a real noob question but better ask .
I have included the AngularJS in the screen.php page, and makred the boday with :
body ng-app="MyApp"
Any kind of help would be appreciated
P.S. To whoever is down voting the question, pls live a comment on why, so I dont make the same mistakes again.

For whoever might be interested , i ditched AngularJS Timer at all, and just pulled back the already calculated time in min and sec with php, so it refreshes every 2 secs, and its the same
$ms=(strtotime($timeNow) * 1000)-(strtotime($row[6]) * 1000);
$time=floor($ms/60000).':'.floor(($ms%60000)/1000);

How do you make the meteorjs reactive-froala editor update when its value changes?

I'm using meteorjs and the froala-reactive editor.
In my router I return the collection data to the template, which works fine.
But I need the ability to update the contents of editor. What is the best way to update _value?
The template code:
{{> froalaReactive _onbeforeSave=doSave inlineMode=false _value=getText}}
The router.js code:
Router.route('admin/pages/:_id', function () {
this.render('Page', {
data: function () {
Session.set('editorContent', 'editor content here');
return Pages.findOne({_id: this.params._id})
}});
});
Helper function:
Template.Page.helpers({
getText: function () {
var self = this;
return function (e, editor, data) {
return Session.get("editorContent");
};
}
});
I expect that when the session variable editorContent changes the displayed content in the editor updates, but this is not working.

Your helper function should simply return the Session value, instead of a function.
Like this:
getText: function () {
return Session.get('editorContent');
}
Here's a working example that you can clone and play around with.

Meteor HTTP call loads image constantly

In my Meteor app, I am trying to load a random image from this API and I get a JSON like:
{
"id":2026
"url": "https:// ... " ,
"large_url":null,
"source_id":609,
"copyright":"CC0",
"site":"unsplash"
}
I do it this way:
if (Meteor.isClient) {
Template.body.helpers({
randomImage: function() {
Meteor.call("unImage", function(error, results) {
Session.set('url', results.data.url);
});
return Session.get('url');
}
});
}
if (Meteor.isServer) {
Meteor.methods({
unImage: function() {
this.unblock();
return Meteor.http.call("GET", "http://www.splashbase.co/api/v1/images/random");
}
});
}
In my html:
<div class="header" style="background-image: url('{{randomImage}}')">
...
</div>
This is working, but it reloads the image every second - more or less. I guess this is happening because the function unImage, which is on server side, loads all along with the server or something like that (not sure); anyway I cannot make it stop. Any ideas on how to solve it? And why is this happening?

This is because session variable inside of your randomImage helper.
And Session variables are reactive in nature, in which it re-runs in a block whenever its value is changed.
In this case, helper code is re-running again and again and hence, Meteor methods gets called again and again
So, move Meteor.call in helper to rendered event as shown below
if (Meteor.isClient) {
Template.body.rendered= function(){
Meteor.call("unImage", function(error, results) {
Session.set('url', results.data.url);
});
}
Template.body.helpers({
randomImage: function() {
return Session.get('url');
}
});
}
Which should call the Meteor method once template is ready and setting url variable and thus reactively helper randomImage gets re-run and gets value of same

calling Angular js file with partial doesn't work for first time

I am trying to load following js with partial, using $http . my problem is when i run code firest time get controller undefined type error,
where as on second click it works fine.
JAVASCRIPT::
$scope.loadPage = function(testurl) {
$scope.testpage = testurl;
var element = angular.element($("#data_template"));
$http.get(testurl).success(function(data) {
element.html(data);
$compile(element.contents())($rootScope);
$('.div1').slideUp('slow');
$('#data_template').slideDown('slow');
});
};
HTML::
<div class="movie-listing movie-listing-step"
ng-controller="ProductAddController">
<!-- all DOm PArt -->
</div>
mt js comes from s3 bucket, so may be js taking long time to come and $compile starts before js load . how to solve this problem ??

Here I have used $viewContentLoaded
app.controller('ProductAddController', function ($scope, $timeout) {
$scope.loadPage = function(testurl) {
$scope.testpage = testurl;
var element = angular.element($("#data_template"));
$http.get(testurl).success(function (data) {
element.html(data);
$compile(element.contents())($rootScope);
$('.div1').slideUp('slow');
$('#data_template').slideDown('slow');
});
}
$scope.$on('$viewContentLoaded', function(event) {
$timeout(function() {
$scope.loadPage(testurl);
},0);
});

Scroll to bottom of page after get request AngularJs

I'm familiar with using something like:
$scope.gotoBottom = function(){
$location.hash('bottom');
$anchorScroll();
}
and this works.. yet what I'm seeing is an issue when retrieving data that's being used in an ng-repeat and attempting to resize when that data comes in.
Example (in controller):
users.get({userList:$routeParams.conversationId}, function(data){
$scope.userList = data;
$scope.gotoBottom();
})
The gotoBottom method is firing to fast, while the ng-repeat is looking on $scope.userList and buidling it's table based off that.
I want to be able to toggle gotoBottom after that list has been remade (or whenever it's modified). Is there a better way to achieve this?
Thank you!

You can use $watch listener to fire gotoBotton when an AngularJs variable change.
$scope.ActivityList = new Array();
$scope.$watch("ActivityList", function () {
$scope.$evalAsync(function () {
$scope.DoSomething();
});
}, true);
$scope.DoSomething = function () {
$(function () {
//$scope.gotoBottom();
});
};

Also you can run scrolling bottom after page is loaded
angular.element($window).bind('load',
function() {
var element = document.getElementById("messages-list").lastElementChild;
element.id = "bottom";
/*-------------*/
$location.hash('bottom');
$anchorScroll();
}