Global variable between run and controller angularjs - javascript

i have a script angularjs with this code :
var myApp = angular.module('App_example', ['duScroll'])
.run(function($rootScope, $location, $window) {
var url = $window.location.href;
if( url.indexOf("section1") != -1 ) {
$rootScope.edition = "section1";
} else {
if(url.indexOf("section2") != -1) {
$rootScope.edition = "section2";
} else if(url.indexOf("section3") != -1) {
$rootScope.edition = "section3";
} else {
$rootScope.edition = "section4";
}
}
if(!history || !history.replaceState) {
return;
}
$rootScope.$on('duScrollspy:becameActive', function($event, $element){
//Automaticly update location
var hash = $element.prop('hash');
if (hash) {
history.replaceState(null, null, hash+'_'+$rootScope.edition);
}
});
});
and this controller :
myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {
var url = $window.location.href;
if( url.indexOf("section1") == -1 ) {
$rootScope.edition = "section1";
} else {
if(url.indexOf("section2") != -1) {
$rootScope.edition = "section2";
} else if(url.indexOf("section3") != -1) {
$rootScope.edition = "section3";
} else {
$rootScope.edition = "section4";
}
}
});
But I have this flollowing error and I don't know why. How can I pass global variable between the run and the controller. It's for manipulate the url without reloading.
TypeError: Cannot set property 'edition' of undefined
Thanks.

The string elements into the Array must match the dependencies injected (as arguments) on the function itself:
myApp.controller('ImageController',
['$scope', '$window', '$location', '$document', '$state', '$rootScope',
function ($scope, $window, $location, $document, $state, $rootScope) {
...
}]);
And that is because you are using “annotated dependency injection”, i.e., you are explicitly naming the dependencies with strings before injecting them into the controller. That's a best practice to avoid problems with minification, as explained here: angular docs
That said, you could also fix the issue by passing the function directly, without annotating the dependencies, like this:
myApp.controller('ImageController',
function ($scope, $window, $location, $document, $state, $rootScope) {
...
});

Add all dependencies to function in correct order, because you missed some (like $state)
myApp.controller('ImageController',
['$rootScope', '$scope', '$window', '$location', '$document', '$state',
function ($rootScope, $scope, $window, $location, $document, $state) {
// code
});

The issue is this line. Your array mentions 5 parameters, but your function takes 6. You forgot to add $state to the array. As your code sits now, it will assign $rootScope to the $state object, and $rootScope will be undefined.
myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {
Simply add $state into the array, and your code should work as intended.
myApp.controller('ImageController', ['$scope', '$window', '$location', '$document', '$state', '$rootScope', function($scope,$window,$location,$document,$state,$rootScope) {

Related

AngularJS TypeError is not a function

I have the following code in my service:
testApp.service('detailsService',['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http){
var details;
this.getDetails = function(name){
return $http({
method : "GET",
url : name
}).then(function(response) {
details= response.data;
console.log(response.data);
return response.data;
});
};
}]);
What i want to do is call this function in my controller when the page(view) is loaded.
testApp.controller('testController', ['$scope', '$location', 'databaseService','detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService){
$scope.details;
var selectedDetails = function(name){
detailsService.getDetails(name).then(function(data){
$scope.details= data;
});
};
selectedDetails(name);
}]);
I keep getting the error detailsService.getDetails is not a function.
I'm using the same function from the detailsService in another controller without any problems.
Does anybody know why i keep getting this error?
The error is expected as you are not injecting dependencies properly, You need to use the correct sequence.
testApp.controller('testController', ['$scope',
'$location',
'databaseService',
'detailsService',
'$routeParams',
function($scope, $location, databaseService, detailsService, $routeParams ){
instead of
testApp.controller('testController', ['$scope',
'$location',
'databaseService',
'detailsService',
'$routeParams',
function($scope, $location, databaseService, $routeParams, detailsService){
Note Both the string part and the function arguments need to match up 1:1.
remove the promise in the service.Just return the request. since you are catching the promise from the controller no need to use it in the service
testApp.service('detailsService', ['databaseService', 'loggedService', '$http', function(databaseService, loggedService, $http) {
var details;
this.getDetails = function(name) {
return $http({
method: "GET",
url: name
})
};
}]);
Also make sure the sequence is correct order when you are injecting services.
change this
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, $routeParams, detailsService )
to this
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams)
controller
testApp.controller('testController', ['$scope', '$location', 'databaseService', 'detailsService', '$routeParams', function($scope, $location, databaseService, detailsService , $routeParams) {
$scope.details;
var selectedDetails = function(name) {
detailsService.getDetails(name).then(function(data) {
$scope.details = data;
});
};
selectedDetails(name);
}]);
I got this error because I had added a callback method to a component, but the callback was not used by all the pages where that component was used:
<component [myCallbackFn]="fnNameToBindToFn">
component.ts:
public onClick() {
// some code
this.myCallbackFn();
}
Each time it was not used I got this error which was effectively a NullPointerException (from Java). So in the other uses of <component> in my website I had to add a check in the component before the callback to say:
if (undefined !== this.myCallbackFn) this.myCallbackFn();

AngularJS - controller and factory - where am I going wrong at include/inject functions?

I'm new to Angular and cannot pinpoint where I am going wrong. I'm just trying to simply inject my factory into my controller, reference said: "Cannot read property 'validar' of undefined". I have two files, ServiceUtil.js where have a service and CentroCustoCtrl.js where I'm trying to use service's function.
The function at ServiceUtil.js:
(function () {
'use strict';
angular.module('Services', [])
.service('ValidarFormulario', [function () {
this.validar = function (form) {
var valido = true;
//code
}
return valido;
}
}]);
})();
And CentroCustoCtrl.js
(function () {
'use strict';
var app = angular.module("start", ['AxelSoft', 'ngLocalize',
'ngLocalize.Config', 'mvComponentes','Services'])
.value('localeConf', {
basePath: '../Scripts/Locales', ...
...
});
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
$scope.Salvar = function () {
if (ValidarFormulario.validar(document.getElementsByTagName('input'))) { ...// Cannot read property 'validar' of undefined
);
I tried with factory , but not worked too:
angular.module('Services', [])
.factory('ValidarFormulario', [function () {
return{
validar : function (form) {
var valido = true;
//code
}
}
return valido;
}
}
}]);
})();
Please, I appreciate any help you can provide.
The problem is you had wrong dependency sequence inside DI inline array, basically they are mismatching in number and their sequences
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario',
//removed $rootScope, $timeout which wasn't used.
function ($scope, $http, ValidarFormulario) {
OR either way you could just add the dependency inside array, if they are really gonna used inside controller like below
app.controller('CentroCustoCtrl', ['$scope','$http','$rootScope','$timeout','ValidarFormulario',
function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
Just change the below line of code
app.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
to
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario) {
This should work.
Well, also I've saw that your controller injections are wrong. You have:
App.controller('CentroCustoCtrl', ['$scope', '$http', 'ValidarFormulario', function ($scope, $http, $rootScope, $timeout, ValidarFormulario)
And you should have:
app.controller('CentroCustoCtrl', ['$scope', '$http', '$rootScope', '$timeout', 'ValidarFormulario', function ($scope, $http, $rootScope,$timeout, ValidarFormulario)
Injectors on "[ ]" must mach with function parameters.
When you set a module the syntax is:
angular.module('Services', [ here injections ])
But when you get a module to use it, syntax must be:
angular.module('Services')

angular module.run ReferenceError: $location is not defined

I want to AngularJS Change Path Without Reloading, look http://joelsaupe.com/programming/angularjs-change-path-without-reloading/
in core.js:
'use strict';
angular.module('App',['ngRoute'])
.run(['$route', '$rootScope', '$location', function ($route, $rootScope, $location) {
var original = $location.path;
$location.path = function (path, reload) {
if (reload === false) {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function () {
$route.current = lastRoute;
un();
});
}
return original.apply($location, [path]);
};
}]);
In controller:
angular.module('App')
.controller('DetailController', ['$scope', '$location', function($scope) {
$scope.changeURL = function(){
console.log("IN changeURL");
$location.path('/sample/gfshdfdsf', false);
};
}]);
If invoke changeURL, it will occur error:ReferenceError: $location is not defined
Can somebody help me? Thanks!
$location is not injected in the controller, so just change
.controller('DetailController', ['$scope', '$location', function($scope)
to
.controller('DetailController', ['$scope', '$location', function($scope, $location)
I was getting the same error and I deleted the $rootScope from the definitions. After that it worked. No idea why.
Not working
app.factory("OrganizationService",
['$q', '$http', '$log', '$location', '$rootScope', '$timeout', 'LoadSubscriptionsService', 'LoadRolesService',
function($scope , $http, $log, $location, $cookies, $rootScope, $timeout) {
Working
app.factory("OrganizationService",
['$q', '$http', '$log', '$location', '$timeout', 'LoadSubscriptionsService', 'LoadRolesService',
function($scope , $http, $log, $location, $cookies, $timeout) {

Undefined service in controller

I have a service and a controller declared like this:
angular
.module('purchaseApp')
.service('sharedProperties', function() {
var stringValue = 'test string value';
return {
getString: function() {
return stringValue;
}
}
})
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
When I try to access to the service in my controller, it returns me "undefined", but I don't know why... Could you help me?
Thanks.
Your controller is missing sharedProperties. You need to inject it. Add it after $http.
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', 'sharedProperties', function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
.controller('purchaseOrderCtrl', ['$scope', '$rootScope', '$location', '$http', **'sharedProperties'**, function ($scope, $rootScope, $location, $http, sharedProperties) {
console.log(sharedProperties.getString());
});
Add sharedProperties service in your controller dependent parameter as well.

$stateParams become 'undefined' after passing to the controller

I set the $stateParam by getting a cell value from a table:
$scope.tableClick = function() {
var tr = $('#Table_1').find('tr');
var id = $(event.target).parent().find("td:first").text();
$stateParams.engineId == id;
$state.go('engineselection');
}
When I stop the debug at this point. It gives me the engineId value.
This is the router part that I use:
$stateProvider.state('engineselection', {
url : '/engineselection:engineId',
templateUrl : 'assets/views/engineselection.html',
controller : 'EngineSelectionCtrl'
})
This is what happens in the controller:
controllers.controller("EngineSelectionCtrl",
["$scope", "$rootScope", "directiveBinder", '$timeout', '$stateParams', '$resource', '$location', 'rtmService', '$state',
function($scope, $rootScope, directiveBinder, $timeout, $stateParams, $resource, $location, myService, $state) {
myService.loadViewWithEngine(function(id, data) {
$scope.views = data;
$scope.$apply();
$('#loadingViews').spin(false);
});
When I stop here before the function and type console $stateParams, it tells me that I have a state parameter named 'engineId' but it is undefined. What should I do to pass the parameter to the controller with its value?
Worked after I have changed $state.go call like this:
$state.go('viewselection', {engineProgramId: id});

Categories

Resources