Get current state in ionic app - javascript

Newbie to the whole ionic and angular scene.
I used the ionic creator to generate the view files.
My goal is to check if the user is logged in before proceeding in to a tab.
However, before getting to the authentication part, I wanted to check which window the user is on.
I am trying to use a simple alert/console.log to identify the progress.
Below is my code.
.controller('adminPageCtrl', ['$scope', '$stateParams', '$state', function ($rootScope, $scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
I have come across the below error which i cant seem to make heads or tails.
"ionic.bundle.js:26799 TypeError: Cannot read property 'current' of undefined".
Any help is greatly appreciated.
Even the console.log($state); command returns "undefined".

The problem with your code is that you are defining more depencencies than you are actually using.
You can either fix it by removing the reference to $rootScope on the function definition or adding it to the list of dependencies.
.controller('adminPageCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
OR
.controller('adminPageCtrl', ['$rootScope', '$scope', '$stateParams', '$state', function($rootScope, $scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])
And since you are using the name of the dependencies to name the variables inside the function, you could also use Implicit Annotation (please take a look on the docs https://docs.angularjs.org/guide/di):
.controller('adminPageCtrl', function($scope, $stateParams, $state) {
//alert($state.current.name);
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
})

You've need $rootScope dependency. Without them you will receive another list of arguments.
.controller('adminPageCtrl', ['$rootScope', '$scope', '$stateParams', '$state', function($rootScope, $scope, $stateParams, $state) {
$scope.currState = $state;
var currentState = $state.current.name;
console.log($state);
}])

Related

Unable to call function as $rootScope is undefined

I am trying to call the function inside the controller 'Notification' when getNotification is called in the SelectNotificationCtlr. However when running this I get an Error stating that $rootScope is undefined on the line below console.log("log");. I have tried passing the $rootScope as a parameter in my getNotification function but still receive the same error.
Please see my code below, any advice or help would be really appreciated.
app.js
selectNotification.controller('selectNotificationCtlr', ['$scope', '$rootScope', 'notificationsService',
function($scope, $http, notificationsService, notificationService, $rootScope) {
$scope.getNotification = function() {
var id = $scope.selectedNotification;
notificationData = notificationsService.getNotifications();
console.log(notificationData);
console.log("log");
$rootScope.$emit("call", {});
}
}
]);
selectNotification.controller('Notification', ['$scope', '$rootScope',
function($scope, $rootScope) {
$rootScope.$on("call", function() {
$scope.parent(notificationService);
});
$scope.parent = function() {
console.log("log");
}
}
]);
Kind regards
CB
Your controller should have dependencies in the right order,
selectNotification.controller('selectNotificationCtlr', ['$scope', '$rootScope', 'notificationsService',
function($scope, $rootScope, notificationsService) {

Redirect after X seconds AngularJS

I already saw this thread but it uses ui-router and I'm only using the $routeProvider of AngularJS. The code in the thread is:
.controller('SeeYouSoonCtrl', ['$scope', '$state', '$timeout',
function($scope, $state, $timeout) {
$timeout(function() {
$state.go('AnotherState');
}, 3000);
}])
How can I use it with my routeProvider since I am not using ui-router? Thank you in advance.
You need to use $location service
$location.path('/anotherURL');
By $location method :
code:
.controller('HomeController', ['$scope', '$state', '$location',
function($scope, $state, $location) {
$location.path('/appurl');
}])

Global variable between run and controller angularjs

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) {

angular.js routing and stateparams

I'm trying to modify standard user module of meanjs. I added a simple route:
state('users', {
url: '/users/:username',
templateUrl: 'modules/users/views/view-profile.client.view.html'
});
And in my view:
data-ng-controller="ViewProfileController" data-ng-init="findUser()"
I also injected $stateParams to my controller. So in my ViewProfileController - findUser function, when I write this:
console.log($stateParams.username)
I expect to get username parameter. But it returns undefined.
When I set the route this way,
state('users', {
url: '/users/:username',
template: function ($stateParams){
return $stateParams.username;
}
});
it returns username. I don't know what is wrong or missing. Any ideas?
edit: this was my full controller code
'use strict';
angular.module('users').controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $location, Users, Authentication, $stateParams) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
...
};
}
]);
Your dependencies don't match up - the list of dependencies need to match the parameters in the controller function in the same order:
'use strict';
angular.module('users')
.controller('ViewProfileController', ['$scope', '$http', '$stateParams', '$location', 'Users', 'Authentication',
function($scope, $http, $stateParams, $location, Users, Authentication) {
$scope.user = Authentication.user;
$scope.findUser = function () {
console.log($stateParams);
};
}
]);
I should use controller instead of template.
Replace into you code the template: to the follow snippet:
controller: function($stateParams){
console.log('username: '+$stateParams.username);
}
You can see a complete example of this feature here

$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