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

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.

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 $rootScope Properties undefined after Asynchronous API [duplicate]

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);
});
}]);

Directive - Dependency Injection do not resolve (controllerAs syntax)

I am Trying to follow the rules on https://github.com/johnpapa/angular-styleguide#style-y075 , and i am trying to inject the dependencies, and unfortunatly, it fails on GetDiscussionThreadListService
HTML :
<discussion-parent someParam></discussion-parent>
JS :
var xDiscussionsDirectives = angular.module('xxx.discussions.parent', ['ngResource']).directive('discussionParent', discussionParrentDirective);
function discussionParrentDirective() {
var directive = {
restrict: 'E',
scope: {
discussionType: '#docDiscussionType',
},
templateUrl: 'modules/discussions/views/ParentDiscussionTemplate.aspx',
replace: false,
controller: discussionParrentDirectiveController,
//controllerAs: 'vm',
bindToController: true
};
return directive;
}
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];
function discussionParrentDirectiveController($scope, $element, $attrs) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
}
ReferenceError: GetDiscussionThreadListService is not defined
(xxx.discussions.parrent.js:278)
To solve your problem you need to declare this module in your function arguments list like this :
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService'];
function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
This way your variable GetDiscussionThreadListService will be define in your scope.
One alternative is to import is as first to avoid all those useless module (which are injected by the way).
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', 'GetDiscussionThreadListService', '$location', '$filter', '$interval', '$modal', '$timeout'];
function discussionParrentDirectiveController($scope, $route, $routeParams, GetDiscussionThreadListService) {
GetDiscussionThreadListService.get({
//some params
}, function (data) {
}
I also use this styleguide it is a great one, continue with it because totally think it worth it.
discussionParrentDirectiveController.$inject = ['$scope', '$route', '$routeParams', '$location', '$filter', '$interval', '$modal', '$timeout', 'GetDiscussionThreadListService']
And
function discussionParrentDirectiveController($scope, $element, $attrs)
need to match
the $inject purpose is to handle issues like the minimization of javascript, so the module names need to match. In your function you need to have the same parameters.
function discussionParrentDirectiveController($scope, $route, $routeParams, $location, $filter, $interval, $modal, $timeout, GetDiscussionThreadListService)

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) {
...
}]);

Resources