Angular $rootScope Properties undefined after Asynchronous API [duplicate] - angularjs

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 6 years ago.
I have main controller:
.controller('mainCtrl', ['$scope', '$rootScope', 'Data', '$http', '$log', '$filter', '$q', '$timeout', function($scope, $rootScope, Data, $http, $log, $filter, $q, $timeout){
Data.get('customers').then(function(data){
$scope.customers = data.data;
$rootScope.language = data.data[0].language;
});
$rootScope.word_pub_curr_lang = 'word_pub_' + $rootScope.language;
console.log('from maincrtl', $rootScope.word_pub_curr_lang);
}]);
The problem is that I can't receive $rootScope.word_pub_curr_lang or $rootScope.language - are always undefined.

It is getting undefined because, it gets printed before you actually get the value from the request, place them inside,
controller('mainCtrl', ['$scope', '$rootScope', 'Data', '$http', '$log', '$filter', '$q', '$timeout', function($scope, $rootScope, Data, $http, $log, $filter, $q, $timeout){
Data.get('customers').then(function(data){
$scope.customers = data.data;
$rootScope.language = data.data[0].language;
$rootScope.word_pub_curr_lang = 'word_pub_' + $rootScope.language;
console.log('from maincrtl', $rootScope.word_pub_curr_lang);
});
}]);

Related

Services in angularJS not working in controller

I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);

Angular, "x is not a function" when attempting to use Service

app.service('situacao', function($log, $q, $http, $rootScope){
var situacao = this;
situacao.lista = {};
situacao.getAllSituacao = function(){
var defer = $q.defer();
console.log("php/getAll.php");
$http.get($rootScope.endPoint + "php/getAll.php")
.success(function(res) {
console.log(res);
situacao.lista = res;
defer.resolve(res);
}).error(function(err, status){
defer.reject(err);
});
return defer.promise;
};
return situacao;});
app.controller('listCtrl',['$scope', '$uibModal', '$log', '$http', function(situacao, $scope, $modal, $log, $http) {
$scope.init = function(){
$scope.getAll();
}
$scope.getAll = function(){
situacao.getAllSituacao().then(function(res){
//sucess
$scope.dispSituacao = situacao.lista;
}, function(err){
//error
})
};
$scope.init();
}]);
I'm trying to use the "service" but results in error:
situacao.getAllSituacao is not a function.
what is wrong?
You have to update your inject to pass it in as well since you're using the array notation:
Change
app.controller('listCtrl', ['$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http)
To
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {
In my situation, I named all injected services correctly, but, their order was not the same, and it gave me the same error. My code was something like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function ($scope, situacao, $modal, $log, $http) {}
Putting them in correct order solved the problem. Like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {}
Hope this helps someone.

AngularJS $parse TypeError: object is not a function

I have stripped my app down to the bare bones but I keep getting this error when using $parse: TypeError: object is not a function
What is wrong? What am I missing?
Seems to work fine in this plunker: http://plnkr.co/edit/WrXv9hT5YA0xYcLLvyDb
Could parse be conflicting with some other module?
Weirder still - it actually does change the value of $scope.modal.on! Even though it appears to die before hand...
/* Controllers */
//var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap', 'ui.sortable']);
var MyApp = angular.module('MyApp', ['ngSanitize', 'ui.bootstrap']);
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal, $log) {
$scope.modal = {
open : false,
tplfile : null,
toggle : function(){
this.open = !this.open;
if(this.open) angular.element('body').addClass('modal-open');
else angular.element('body').removeClass('modal-open');
}
};
var modal = $parse('modal.open');
modal.assign($scope, true);
}]);
You passed in your dependencies in the incorrect order. The dependencies to the function have to match exactly the order in the array.
MyApp.controller('MyController',
['$scope', '$http', '$modal', '$parse', function
($scope, $http, $parse, $modal, $log) {
If you swap $parse and $modal in your controller declaration, your error will go away. Also, you are missing $log, if you try to use that dependency you will get an error as well.
['$scope', '$http', '$modal', '$parse', function($scope, $http, $parse, $modal,
The $parse and $modal are interchanged.
Please correct the order and it will work :)
It should be
MyApp.controller('MyController', ['$scope', '$http', '$modal', '$parse', '$log', function($scope, $http, $modal, $parse, $log) {

AngularJS - $timeout is not a function

I try to inject $timeout in the run function but I get that it is not a function when I try to call it. Why ?
var mainApp = angular.module('mainApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', ngCookies']);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
should be:
mainApp.run(['$rootScope', '$location', '$route', 'authService', '$timeout',
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
see 'The array annotation' part here:
https://docs.angularjs.org/api/auto/service/$injector
When you annotate function with names of dependencies, the order of appearance should match.
...
mainApp.run(['$rootScope', '$location', '$route', '$timeout', 'authService',
function ($rootScope, $location, $route, $timeout, authService) {
...
}]);

Angularjs Error: [ng:areq] http://errors.angularjs.org/1.2.8/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%string

I'm new to angularjs and I'm working on a single page-app. I'm getting this error message that doesnt tell me where in my code that's throwing this error and I've went on angularjs' website to look up the error but I dont understand it.
This is the error message I'm getting,
Error: [ng:areq] http://errors.angularjs.org/1.2.8/ng/areq?p0=fn&p1=not%20aNaNunction%2C%20got%string
Any ideas on what might be throwing this error? Thanks
Edit: The error might have something to do with the way I declare my modules but I still can't figure it out. Here's a sippet of my code ...
var user = angular.module('user', ['ui.bootstrap','ngResource']);
user.controller("user", ["$scope", "$resource", "$location", '$state',
function($scope, $resource, $location, $state) { }]);
var saveObject = angular.module('saveObject', ['ui.bootstrap','ngResource'])
.factory('savedObject', function($resource) {});
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
var route = angular.module('route', ["ui.router", 'ngResource', 'saveUser'])
route.config(function($stateProvider, $urlRouterProvider, $locationProvider) {});
route.controller('add_userController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, saveUser) {}]);
route.controller('add_familyController', ["$scope", "$resource", '$state', '$timeout', '$rootScope', '$http', '$window', 'saveUser',
function($scope, $resource, $state, $timeout, $rootScope, $http, $window, saveUser) {}]);
Your service definition seems to be messed up:
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', 'savedObject', function(savedObject) {});
should be maybe
var saveUser = angular.module('saveUser', ['saveObject']);
saveUser.service('saveUser', ['savedObject', function(savedObject) {}]);

Resources