What i am doing is; i get the data from db and put it in
$scope.GetMyData = function () {
//http get request here
.then(function (result) {
$scope.myData = result.data;
});
}
and when i want to refresh
$scope.myData
I have a function which is ticking every 15 seconds to trigger my GetMyData function to get the updated data. The timer function is like;
$interval(function () {
$scope.GetMyData();
}, 15000);
The problem is whenever I've overwritten $scope.myData, Page is not actually refreshing but the view looks like it's refreshed. Is there a way to solve this ?
Use $watch service helps you to run some code when some value attached to the $scope has changed.
$scope.myData = "";
$scope.$watch('myData', function() {
/*Here you can bind changed value to your view, updated value can be reflected on $scope.myData change */
alert('myData has changed!');
});
Related
I am using angularJS localstorage and i injected this very well but problem in code.
I want when localstorage gets new data, so that its call a function $scope.getAllContact() automatically.
I am trying to solve this issue coz, for example, i opened two tab in browser, if i change anything in one tab, the latest change should reflect in other tab too without any reload and refresh.
At first see my code:
app.controller('crudCtrl', function($scope, $http, $timeout, $localStorage, $sessionStorage) {
$scope.getAllContact = function() {
var data = $http.get("http://127.0.0.1:8000/api/v1/contact/")
.then(function(response) {
$scope.contacts = response.data;
// show something if success
}, function(response) {
//show something error
});
};
$scope.getAllContact();
// below method will post data
$scope.formModel = {};
$scope.onSubmit = function () {
$http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
.then(function(response) {
$localStorage.name = response.data;
$timeout(function() {
$scope.successPost = '';
}, 4000);
//below $scope will push data in client site if the request is success
$scope.contacts.push(response.data);
//if any error occurs, below function will execute
}, function(response) {
// do nothing for now
});
};
});
above in $scope.onSubmit() methond, i send the submitted data to localstorage too, so i need if localstorage gets new data, it should execute $scope.getAllContact() always automatically without any refresh.
Can anyone fix me this issue?
Use the storage event:
angular.element(window).on("storage", $scope.getAllContact);
$scope.$on("$destroy", function() {
angular.element(window).off("storage", $scope.getAllContact);
});
For information, see
MDN Window API Reference - storage_event
MDN Web API Reference - StorageEvent
I'm trying to retrieve a list of data from mysql database by using electron and bind it to a list in the controllers scope. I'm using mysql2. Here is my controller:
$scope.carList = [];
mysql.execute("SELECT * FROM cars").spread(function(results){
$scope.carList = results;
console.log(results);
})
I do get the results back, but the in the view carList remains empty. How can I solve this problem?
I just added a button to my view and bound it to a check function like this:
$scope.check = function(){
console.log($scope.carList);
}
After I click on the button, my list in the views gets populated. Now my question would be how can I have my list populated on the start of the controller rather than wait for an event ro make it happen?
I think mysql.execute("").spread(fn) promise is not a part of the AngularJS digest cycle. You did not provide enough code to fully reproduce your problem but I think by triggering a new digest cycle it should work for you. E.g. try it with $timeout which triggers a new digest cycle.
$scope.carList = [];
mysql.execute("SELECT * FROM cars").spread(function(results){
$timeout(function () {
$scope.carList = results;
});
})
I would prefer to create a AngularJS service which handles your electron mysql in a nice way. You could globally apply your $scopes in it, right after finishing your mysql procedures which are not a part of your digest cycle.
Approach by using AngularJS promises
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $q) {
$scope.carList = [];
getCars.then(function(cars) {
$scope.carList = cars;
});
function getCars() {
var deferred = $q.defer();
mysql.execute("SELECT * FROM cars").spread(function(results) {
deferred.resolve(results);
});
return deferred.promise;
}
});
I have a controller that looks something like this:
(function () {
"use strict";
angular.module("app")
.controller("postsController", postsController);
function postsController($scope, $http, $uibModal, PostService) {
var vm = this;
$scope.posts = [];
PostService.getPosts()
.then(function (p) {
$scope.posts = p.data;
}, function (error) {
vm.errorMessage = "Failed to load data: " + error;
});
$scope.$watchCollection('posts', function(newPosts, oldPosts) {
PostService.getPosts();
});
}
})();
The original data is pulled from the service and the posts array is populated properly. However, I am have trouble having the view refreshed if data in the array has changed. Either nothing happens on the view, or I am seeing an infinite loop with the $watch.
Any help is greatly appreciated.
Why get infinite loop:
$scope.$watchCollection('posts',function(){...}) watched your post array, when you refresh your view and post changed, watch listener triggered.
Then listener do PostService.getPosts();, resolve with $scope.posts = p.data;, this also change the post ( more: post been set back to data from backend, that's why nothing changed in your view), then watch listener triggered again. Then do PostService.getPosts(); again, then again and again.
So you get a infinite loop.
I have a service with the following:
.service('TasksService', function ($http) {
return $http.jsonp('http://blabla/json/?callback=JSON_CALLBACK');
});
My controller:
.controller("TasksCtrl", function ($scope, TasksService) {
TasksService.then(function (TasksService) {
$scope.Tasks = TasksService;
});
});
This shows list with many items.
But I have another service and another controller. I change an item there and when I save and post data to database and I get back to initial list, I still see the old listed items. I must refresh the browser to see what I have edited.
In the second controller I have save function with this:
$scope.saveTask = function () {
$http.post('http://blabla', $scope.Task.data).then(function (data) {
// This shows the very first state with all the listed items
$state.go('tasks');
});
};
When I save the changes and state.go() shows me the first screen I do not know why the data is not with the new changes from the service returned data. It seems like the screen is just changed but the new data is not returned from the service. Any ideas how to fix this?
I got it working. I changed my service and controller. In my service I returned an object with another method and then I changed my controller also to use the returned method.
The service:
.service('TasksService', function ($http) {
return {
getTasks: function() {
return $http.jsonp('http://blabla/json/?callback=JSON_CALLBACK');
}
};
});
And the controller:
.controller("TasksCtrl", function ($scope, TasksService) {
TasksService.getTasks().then(function (data) {
$scope.Tasks = data;
});
});
Now it is working and I see the items list the new saved and returned data. Thank you!
All you need is to reflect the changed data into your html
Angular has a method for this
$scope.$apply();
This method works both with parameters as well as without parameters.
Hope this helps.
I use AngularJS on the client side to display some informations that'll get pushed through a NodeJS-Server. The data will be held in a service factory.
I want to watch this data through the angular watch function.
The problem i run into, is the following. watch runs through the factory only once and stops.
And if the server pushes changed data it won't update the view?
Here is some code snippet.
.factory('clientStorage', ['socket', function (socket){
var that = {};
//basis data
that.basisData = {};
that.getBasisData = function () {
socket.on('sendBasis', function (basis) {
console.log('ich hoffe doch');
that.basisData = basis;
console.log(that.basisData);
});
console.log(that.basisData);
return that.basisData;
};
return that;
}]);
I don't know why this happens?
Anybody there who may help?
Greetings
Henrik
Try this in your controller:
$scope.$watch( function() { return clientStorage.basisData; }, function(clientData) {
$scope.data = clientData;
});
Where $scope.data is the data you are trying to update.