This is how I have my JS set up:
Basically I have a page, and on that page there is a chart. I want to have a loading spinner show while the chart data is loading.
angular.module('myApp', [])
.service('chartService', ['$http', function($http) {
var svc = {};
svc.updateChartData = function($scope) {
$scope.loading = true;
$http({method: 'GET', url: 'http://example.com/getjson'})
.success(function(response) {
var data = google.visualization.arrayToDataTable(JSON.parse(response));
var options = {
...
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
$scope.loading = false;
});
}
return svc;
}])
.controller('PageController', ['$scope', '$http', 'chartService', function($scope, $http, chartService) {
$scope.loading = true;
// When select option changes
$scope.updateData = function() {
chartService.updateChartData($scope);
};
}])
.controller('ChartController', ['$scope', '$http', 'chartService', function($scope, $http, chartService) {
// On load
chartService.updateChartData($scope);
}]);
I am using ng-hide="loading" and `ng-show="loading" to make sure the spinner and the chart show at the correct times.
However, I've noticed that the call below // On load - doesn't actually turn the loading to false. Another message on SO suggested there is a better way to achieve this than by passing $scope around so any suggestions would be appreciated. Thank you.
It is not a good practice to pass your scope object to a service, a service is meant to be stateless. Instead utilize the callbacks of the $http:
chartService.updateChartData().finally(function(){
$scope.loading = false;
});
And, as Grundy mentioned below, return your $http from your service to enable callbacks:
svc.updateChartData = function($scope) {
return $http({ //.. the options });
}
I see some more bad practices though. You shouldn't add the data to your DOM from your service, instead utilize also for this the callbacks:
svc.updateChartData = function($scope) {
return $http({method: 'GET', url: 'http://example.com/getjson'});
}
controller:
// When select option changes
$scope.updateData = function() {
chartService.updateChartData().then(function(data) {
// success
// do something with the return data from the http call
}, function (error) {
// error
// handle error
}).finally (function() {
// always
$scope.loading = false;
});
};
For your google chart it would make most sense to create a directive.
first,you have two controllers,I'm assuming they are nested relations.
PageController include ChartController.
you want to change the value of the parent controller in the child controller.
You must use a reference type rather than a value type.
$scope.loading =true;
change to
$scope.loading ={status:true};
and if you want to set false,Should be
$scope.loading.status =false;
NOT
$scope.loading ={status:false};
second, you can pass a callback function to service.
like this
svc.updateChartData = function(callback) {
....
.success(){
callback();
}
}
controller code change to
.controller('ChartController', ['$scope', '$http', 'chartService',
function($scope, $http, chartService) {
// On load
chartService.updateChartData(function(){
$scope.loading =true;
});
}]);
Related
How can I access $scope data from view to my factory in angularjs? I can access $scope.items from my controller, but when I need to use it in my factory to use the data and generate a pdf I cannot access it.
angular.module('myApp', [])
.controller('myCtrl', function($scope, $http, testFactory) {
$scope.link = "http://localhost:3450/loading.html";
testFactory.all().then(
function(res){
$scope.link = res;
},
function(err){
console.log(err);
}
);
})
.factory('testFactory', function($q){
var pdfInfo = {
content: [
//data should be here...
]
};
var link = {};
function _all(){
var d = $q.defer();
pdfMake.createPdf(pdfInfo).getDataUrl(function(outputDoc){
d.resolve(outputDoc);
});
return d.promise;
}
link.all = _all;
return link;
});
I used factory when I click the generate button from my view, it will wait until the pdf is generated. Coz when I did not do it this way before, I need to click the button twice just to get the pdf generated.
You can just pass the data to your factory as a
function parameter.
angular.module('myApp', [])
.controller('myCtrl', function($scope, $http, testFactory) {
var pdfInfo = {
content: $scope.items
};
$scope.link = "http://localhost:3450/loading.html";
testFactory.all(pdfInfo).then(
function(res) {
$scope.link = res;
},
function(err) {
console.log(err);
}
);
})
.factory('testFactory', function($q) {
var link = {};
function _all(pdfInfo) {
var d = $q.defer();
pdfMake.createPdf(pdfInfo).getDataUrl(function(outputDoc) {
d.resolve(outputDoc);
});
return d.promise;
}
link.all = _all;
return link;
});
I did it. I forgot to send the $scope.items to my factory. So what i did is I added testFactory.all($scope.items) in my controller instead of just plain testFactory.all().
Then in my factory,
I used function _all(value), so I can used the values passed by the views through controller. I am not sure if this is the proper way, but it works. Please suggest good practice if you have.
It is a bad practice to move around $scope to other services, as they may change it and effect your controller logic. It will make a coupling between controllers to other services.
If your factory requires data from the controller, it is better to just pass those parameters to the factory's function.
EDIT: I see you managed to do that, and yes - passing $scope.items is the preferred way (and not, for example, passing $scope).
I am trying to share a variable between a controller and a function. But i get an error from the controller, saying this:
TypeError: Cannot read property 'getSet' of undefined
I have gone through numerous tutorials, but don't know where am I going wrong.
My service code is like this:
app.service('shareData', function() {
var selected = ["plz", "print", "something"];
var putSet = function(set) {
selected = set;
};
var getSet = function() {
return selected;
};
return {
putSet: putSet,
getSet: getSet
};
});
I am able to reach selected from my function defined like this:
setDisplay = function($scope, $mdDialog, shareData) {
console.log(shareData.getSet()); // this is working
$scope.selected = shareData.getSet();
$scope.hide = function() {
$mdDialog.hide();
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.answer = function(answer) {
$mdDialog.hide(answer);
};
};
My controller is like this:
app.controller('topicController', ['$scope', '$http', '$mdDialog', 'shareData',
function ($scope, $http, $mdDialog, $mdToast, shareData) {
console.log(shareData.getSet()); // NOT WORKING
}]);
You had extra $mdToast in your topicController controller's factory function, you need to remove it.
The reason behind it was not working is, currently you had 4 dependency mentioned in array like ['$scope', '$http', '$mdDialog', 'shareData', function & then you are using its instance inside the function next to DI array. Inside that function you had actually 5 dependencies where $mdToast extra. So behind the scene what happening is $scope of function hold an value of '$scope' DI array likewise you go right to left. But when it comes to $mdToast(in controller function) it was holding a value of 'shareData'(of DI array) & then the next parameter shareData get nothing.
app.controller('topicController', ['$scope', '$http', '$mdDialog', 'shareData',
function ($scope, $http, $mdDialog, shareData) { //<--removed $mdToast
console.log(shareData.getSet());
}
]);
NOTE: You are using DI inline array annotation, so the sequence in which dependency are injected in array, in same sequence you should
inject then in underlying factory function.
I want to use my angular JS scope data inside my google chart or JavaScript
My angular JS file given below
angular.module('reports').controller('ReportInfoCtrl', ['$scope', 'reports', '$rootScope','$location','blockUI',
function ($scope, reports, $rootScope, $location, blockUI) {
$scope.getReportDetail = function () {
blockUI.start();
reports.getReportInformation().then(function (data) {
blockUI.stop();
if (data !== undefined) {
$scope.report_details = data;
}
});
};
}]);
Yes, sure. You can access your scope variable of controller out side your angular.
var controllerElement = document.querySelector('[ng-controller="ReportInfoCtrl"]'); // You can use javascript or Jquery to select the controller's div element.
var controllerScope = angular.element(controllerElement).scope(); // Angular provided the interface to access angular's scope
var asd = controllerScope.report_details; // Now you can access all scope variable using 'controllerScope'
Update
angular.module('reports').controller('ReportInfoCtrl', ['$scope', 'reports', '$rootScope','$location','blockUI',
function ($scope, reports, $rootScope, $location, blockUI) {
$scope.getReportDetail = function () {
blockUI.start();
reports.getReportInformation().then(function (data) {
blockUI.stop();
if (data !== undefined) {
$scope.report_details = data;
}
return data;
});
};
}]);
And in your js file,
var asd = controllerScope.getReportDetail();
Asynchronous scope manipulations must occur within a $scope.apply to be noticed by angular.
I have the following controller:
myApp.controller('myCtrl', ['$scope', '$rootScope', '$location', 'myService',
function($scope, $rootScope, $location, myService) {
$scope.myArray = [];
$scope.myFunction = function() {
if (something) {
setTimeout(function(){
$scope.myFunction();
},500);
} else {
var itm = $rootScope.var;
for (var i in itm) {
if (itm.hasOwnProperty(i)) {
$scope.myArray.push(itm[i].value);
}
}
// first console.log
console.log($scope.myArray);
}
}
$scope.myFunction();
// second console.log
console.log($scope.myArray);
}
]);
In the example above the second console.log gets printed before the first one. Why is this the case? Is there a way to make the controller wait for the function to be executed/returned and only after that proceed to execute the rest of the code?
Without seeing how everything is being implemented. This is the best I can help you with. If you want a controller to do something only if a promise is successful you can wrap your code around the request. In the plunkr I have written a sample $http service that has a fake request to myFunction that uses $q.
I would suggest using a factory to share data between controller instead of $rootScope. $rootScope is hard to manage throughout big SPA's. The Plunkr has commented options you can mess with to change between $rootScope and using a Factory.
Service below
app.service('Service', Service);
function Service($q, $rootScope, Factory) {
var deferred = $q.defer();
this.myFunction = function(){
//Using factory to persit data instead of $rootScope
//var itm = Factory.myArray;
var itm = $rootScope.var;
var array = [];
//Item isnt set return error
if(itm === undefined || itm === null) deferred.reject("$rootScope.var is not set")
//Changed this a bit didnt know what $rootScope.var actually was
for (var i in itm) {
array.push(itm[i]);
}
deferred.resolve(array);
return deferred.promise;
}
return this;
}
The first thing the controller does is initializes a request to Service.myFunction() and waits for a success or error callback. After the success you can process and do anything you'd like with the data returned from the promise. If there is an error you can handle it as you see fit.
app.controller('controller', controller);
function controller(Service, $rootScope) {
/* jshint validthis: true */
var vm = this;
vm.myArray = [];
vm.request = "";
//Un-Comment this to return success or error
$rootScope.var = [1,2,3,4,5,6];
//This is a fake http request
Service.myFunction().then(
//if the promise was resolved or $http was a success
//initilize the controller
function(data) {
vm.myArray = (data)
},
//if the promise was resolved or $http was a success
//initilize the controller
function(err) {
vm.request = (err)
})
}
Plunkr
I have the following directive:
MyApp.directive('myFilter', ['$filter','$rootScope',
function($filter, $rootScope)
{
var dir = {};
dir.restrict = 'E';
dir.templateUrl = 'views/myFilter.html';
dir.replace = true;
dir.scope =
{
name: '#',
model: '=',
};
dir.link = function(scope,el,attrs)
{
//stuff here
}
return dir;
}]);
Here's how I invoke it:
<my-filter model="someField" name="abcd" />
When the directive is first initalized, the someField is empty. Later on, it is retrieved via ajax, and its value is filled in.
Question is, how can I watch for the value of someField to be updated? When I do this from the link method:
scope.$watch(scope.model, function()
{
console.log( "changed, new val: ", scope.model );
}
This is only called once, when initalizing the directive, and the value then is empty. When the value is retrieved via ajax (from $http.get), this watch function is not called again. However, in other parts of the page where I'm displaying {{someField}}, that value DOES update when ajax request is fetched. So I don't think the problem has to do with doing $scope.apply() after ajax request.
Edit: someField is assigned in the controller. Here is the code:
MyApp.controller('myCtrl',
['$scope', '$rootScope', '$routeParams',
'ajax', '$filter',
function($scope, $rootScope, $routeParams, ajax, $filter)
{
var userId = parseInt( $routeParams.userId );
$scope.loaded = false;
$scope.someField = ""; //initalize with empty value
var load = function(data)
{
$scope.loaded = true;
$scope.someField = data.someField;
};
ajax.getUser(userId).success(load);
}
]);
The method ajax.getUser() does a $http.get() and returns its promise. In the code above, the load method is called which sets the value of someField.
$watch expects an expression that can be either a function or a string. So, it'll work if you change it to
scope.$watch('model', function() { ... });
or
scope.$watch(function() { return scope.model; }, function() { ... });
Check out this jsFiddle.