I am trying to make a comments section on my website. I have properly linked all my files and getting data from Firebase is working. But, the comments only load after I either click on something or enter text in the "Add comment" field; it does not show the comments instantly when the page loads. Does anyone know why?
Relevant code: (placed at the top of my controller)
$scope.comments = {};
database.ref('comments').on('value', function(items) {
$scope.comments = items.val();
});
$scope.comment = function() {
database.ref('comments').push($scope.newComment);
$scope.newComment = "";
};
Use $scope.$apply
$scope.comments = {};
database.ref('comments').on('value', function(items) {
$scope.$apply(function () {
$scope.comments = items.val();
});
});
$scope.comment = function() {
database.ref('comments').push($scope.newComment);
$scope.newComment = "";
};
Related
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 not sure if this is a good question or even a right approach but I'm just wondering how I could possibly disable a button from my JS file using Meteor.
I attempted
$("#button").disabled = true;
And it didn't work. I'm not sure if this is the right approach or not. I thought of maybe creating a function under a script tag in my HTML file but I thought that would seem redundant considering I have a JS file which represents my model so I was just attempting on figuring out if I can access HTML tags from that file.
Here's the code:
Users = new Mongo.Collection("user-info");
if (Meteor.isClient) {
var myApp = angular.module('calorie-counter',['angular-meteor']);
myApp.controller('formCtrl',['$scope',function($scope) {
$("#button").disabled=true;
$scope.calories;
$scope.goal;
$scope.user;
$scope.submit = function() {
Meteor.call("submit",$scope.user);
$scope.clear();
}
$scope.clear = function() {
$scope.user = {
item1:'',
item2:'',
calories:'',
goal:''
};
}
}]);
}
First, I'm not angularjs user.
But your code must to run template render after.
try to change your code like below. (Note: "yourTemplate" change to yours)
Users = new Mongo.Collection("user-info");
if (Meteor.isClient) {
Template.yourTemplate.onRendered(function() {
var myApp = angular.module('calorie-counter', ['angular-meteor']);
myApp.controller('formCtrl', ['$scope',
function($scope) {
$("#button").disabled = true;
$scope.calories;
$scope.goal;
$scope.user;
$scope.submit = function() {
Meteor.call("submit", $scope.user);
$scope.clear();
}
$scope.clear = function() {
$scope.user = {
item1: '',
item2: '',
calories: '',
goal: ''
};
}
}
]);
});
}
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.
I have a bunch of radio groups and a textarea elements that load in a ng-repeat controller. I want to populate all/some of those controls after the controller has finished loading them. I have tried $scope.$on. I have looked at directives, but they are really confusing.
I just want to call a function to populate the form (manipulate DOM) after the controller has finished loading. The controller currently loads (and loads a sub-controller) on the click of a button.
Here's some example code of what I have. The Risks function is what I am calling when the button is clicked.
myApp.controller('spRisks', function ($scope, $http, Service) {
$scope.getRisks = function(){
var caml = "<View><Query><Where><Eq><FieldRef Name='Owner'/><Value Type='Integer'><UserID/></Value></Eq></Where></Query></View>";
var ownerData = getDataWithCaml("Owners", caml);
ownerData.success(function (data) {
var arrayOfExpressions = [];
for (var i = 0; i < data.d.results.length; i++){
arrayOfExpressions.push(CamlBuilder.Expression().LookupMultiField("OwnerTitle").EqualTo(data.d.results[i].Title));
}
var newCaml = new CamlBuilder().View().Query().Where()
.Any(arrayOfExpressions)
.And()
.TextField("Control").IsNotNull()
.ToString();
newCaml = newCaml.replace(/"/g, '\'');
var jsonData = getDataWithCaml("Risks", newCaml);
jsonData.success(function (jsonDataResults) {
$scope.$apply(function(){$scope.Risks = jsonDataResults.d.results;});
});
jQuery('#divQs').show();
});
$scope.$on('$viewContentLoaded', function () {
alert('test');
Service.getAnswers($('#selYear').val(), $('#selMonth').val());
});
}
});
i'm building an app with angularjs, i have implemented infinite scrolling technique because i have a lot of items to show, so it's a better experience than pagination, but the bad thing that i'm having it's that if the user clicks on item it goes to item page, but when he wants to go back he will be on the top and he should keep scrolling. that's what i want to accomplish if he hits back button he could back to his position where he were !!
Listing Items:
<div class="container" id="infinit-container" ng-controller="ArticlesController">
<div id="fixed" when-scrolled="LoadMore()">
<div ng-repeat="article in Articles">
<article-post article="article"></article-post>
</div>
</div>
</div>
here is when-scrolled directive
app.directive('whenScrolled', function () {
return function (scope, element, attrs) {
$('#fixed').height($(window).height());
var div = element[0];
element.bind('scroll', function () {
if (div.scrollTop + div.offsetHeight >= div.scrollHeight) {
scope.$apply(attrs.whenScrolled);
}
})
}
})
thats the controller
app.controller('ArticlesController', function ($scope, UserService) {
$scope.Articles = [];
var page = 0;
$scope.LoadMore = function () {
UserService.Articles(page)
.success(function (data) {
$scope.Articles.push.apply($scope.Articles, data);
});
page++;
};
$scope.LoadMore();
});
im using page number, save page number somewhere (i prefer sessionStorage) when going to see the item detail , when user is comming back to list, read page number and load the page.
it is the simple code for main page controller (list)
app.controller('ArticlesController', function($scope, UserService) {
$scope.Articles = [];
var page = 0;
$scope.LoadMore = function() {
UserService.Articles(page)
.success(function(data) {
$scope.Articles.push.apply($scope.Articles, data);
});
page++;
}
$scope.LoadArticle = function(articleId) {
sessionStorage.setItem("pageNumber", page);
/// change path to somewhere you want show your article
};
//it will load the page you coming back from
if (sessionStorage["pageNumber"]) {
page = parseInt(sessionStorage["pageNumber"]);
}
LoadMore();
});
because of using sessionStorage , it will deleted if user close the browser or page as expected.