I’m new IONIC & AngularJS. Currently, working on an app & stuck at a point. Don’t how to resolve the issue.
I’ve a login form. After user login to the app, he/she will land at HOME page. In the home page, I’ve an image. On that image, I’m using ng-click. So, on click of that image, it’ll redirect the user to some other page. Here I’m facing the issue & the issue is, just after login when I’m coming to the home page & on click of that image ng-click is not working at all. But, once I refresh the browser & click on that image ng-click start working. Don’t know why this wired thing is happening.
After some random testing, I found that… If I place the same “showVendorPage()” in my “Menu.js” controller file which handle the side menu functionality it started working(just after login). Then, If I refresh the page & click on Image then ng-click is working from my Home.js controller. I think, somewhere something is going wrong & my scope is not working properly.
Here are all files which I’m using. The ionic version which I’m using in 1.7.12
app.js
(function(){
var app = angular.module('e2pro', ['ionic', 'e2pro.LoginController', 'e2pro.HomeController', 'e2pro.AttendanceController', 'e2pro.LogoutController','e2pro.MenuController','e2pro.EmpProfileController','e2pro.EmpSearchController', 'e2pro.VendorController', 'ngMessages', 'ngCordova', 'angularMoment']);
var requestToken = "";
var accessToken = "";
var deviceToken = null;
var access_token = null;
var refresh_token = null;
var session_id = null;
var user_id = null;
var user_login_type = null;
var route_to = null;
app.run(function($ionicPlatform, RequestsService, GeoAlert) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
console.log('inside app.run function');
});
});
// Service for logout user from app
app.factory("User", function($http, $q, $rootScope, $ionicHistory, $state) {
return {
logout: function(){
window.localStorage.clear();
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });
$state.go("login");
}
}
});
app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuController'
})
.state('app.tabs', {
url: "/tabs",
views: {
'menuContent': {
templateUrl: "templates/tabs.html",
}
}
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
//controller: 'LoginController'
})
.state('markEmpAttendance', {
url: "/markEmpAttendance",
templateUrl: "templates/attendance/markEmpAttendance.html",
//controller: 'AttendanceController'
})
.state('app.tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html',
}
}
})
.state('app.tabs.emp-profile', {
url: '/emp-profile/:empId',
views: {
'home-tab': {
templateUrl: 'templates/empProfile.html',
//controller: 'EmpProfileController'
}
}
})
.state('app.tabs.vendor', {
url: '/vendor',
views: {
'home-tab': {
templateUrl: 'templates/vendor/vendor.html',
//controller: 'EmpProfileController'
}
}
})
.state('app.tabs.emp-search', {
url: '/emp-search',
views: {
'home-tab': {
templateUrl: 'templates/empSearch.html',
//controller: 'EmpProfileController'
}
}
})
.state('app.tabs.service-request', {
url: "/articles",
views: {
'serviceRequest-tab': {
templateUrl: "templates/serviceRequest.html",
controller: 'articlesCtrl'
}
}
})
.state('app.tabs.colonies', {
url: "/colonies",
views: {
'colonies-tab': {
templateUrl: "templates/colonies.html",
controller: 'coloniesCtrl'
}
}
})
.state('app.foo', {
url: "/foo",
views: {
'menuContent': {
templateUrl: "templates/foo.html",
controller: 'fooCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/tabs/home');
$httpProvider.interceptors.push('sessionInjector');
});
}());
login.js (controller file)
angular.module('e2pro.LoginController', [])
// Employee Attendance Controller
.controller('LoginController', function($http, $scope, $state, $ionicHistory, $ionicLoading, $cordovaOauth, RequestsService){
console.log('Inside Login Controller');
var baseUrl=null;
$scope.credentials = {};
$scope.validationFailed = false;
$http.get('js/config.json')
.then(function(res){
baseUrl = res.data.server[res.data.mode];
});
// Method for user's default login
$scope.validateCredentials = function(form){
console.log('Form Validation start for login : '+form.$valid);
var attendance_require = null;
var emp_attendance_status = null;
// Setting module data element for the api request
$scope.credentials.module = 'user_login';
$scope.credentials.pageId = 1548;
// Check form validation status & move control accordingly
if(!form.$valid)
{
return false;
}
// Show spinner animation
$ionicLoading.show({
template: '<ion-spinner icon="android"></ion-spinner>'
});
$http({
method: 'POST',
url: baseUrl+'/S/E2Pro_MobileApiEndPoint.php',
data : $scope.credentials
}).then(function successCallback(response) {
if(response['data']['status'] === 'success')
{
session_id = response['data']['data']['session_id'];
user_id = response['data']['data']['user_id'];
route_to = response['data']['data']['route_to'];
attendance_require = response['data']['data']['attendance_require'];
emp_attendance_status = response['data']['data']['emp_attendance_status'];
window.localStorage.setItem("session_id", session_id);
window.localStorage.setItem("user_id", user_id);
window.localStorage.setItem("user_login_type", 'default');
// Hide Spinner before redirecting to home page
$ionicLoading.hide();
// Redirecting to home page
if(route_to === 'home'){
$state.go('app.tabs.home');
return false;
}
}
else
{
// Hide Spinner before redirecting to home page
$ionicLoading.hide();
// Show message for email id & password miss match
$scope.validationFailed = true;
}
}, function errorCallback(response) {
// console.log('Error occcur during user authentication');
// Hide Spinner before redirecting to home page
$ionicLoading.hide();
});
};
});
Home.js (Controller file)
angular.module('e2pro.HomeController', [])
// Employee Attendance Controller
.controller('HomeController', function($scope, $state, $location, $ionicHistory, $ionicSideMenuDelegate, $http, $ionicPopup, User, GeoAlert){
console.log('Inside Home Controller');
var baseUrl=null;
// Check application session. If it's found not exist redirect user to login page
if(window.localStorage.getItem("session_id") === "undefined" || window.localStorage.getItem("session_id") === null) {
$ionicHistory.nextViewOptions({
disableAnimate: true,
disableBack: true
});
$state.go("login");
return false;
}
$scope.empName = '';
$scope.alertMsgBox = false;
$scope.alertMsgText = '';
$scope.employees = [];
$http.get('js/config.json')
.then(function(res){
baseUrl = res.data.server[res.data.mode];
});
// Method for showing Vendor page
$scope.showVendorPage = function(){
console.log('Clicked on vendor icon');
$state.go('app.tabs.vendor');
}
});
Home.html (template file)
<ion-view view-title="Home">
<ion-content class="has-tabs">
<div ng-controller='HomeController' >
<div class="row" style="margin-top:15px;">
<div class="col">
<img src="img/leave.png" ng-click="showVendorPage()">
<h5>Vendor</h5>
</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>
</ion-content>
</ion-view>
Menu.js file
angular.module('e2pro.MenuController', [])
// Employee Attendance Controller
.controller('MenuController', function($scope, $state, $ionicHistory, User){
// Method for logout user from app
$scope.logout = function(){
User.logout();
};
// Method for showing employee profile
$scope.showSelfProfile = function(){
empId = window.localStorage.getItem("user_id");
// console.log('MenuCtrl - click on profile image of emp id : '+empId);
// Redirecting to home page
console.log('At func showSelfProfile');
$state.go('app.tabs.emp-profile', {empId:empId});
}
// Method for showing employee search page
$scope.showEmpSearchPage = function(){
console.log('Cliked on employee search icon');
$state.go('app.tabs.emp-search');
}
// Method for showing Vendor page
$scope.showVendorPage = function(){
console.log('Clicked on vendor icon from Menu Controller file');
$state.go('app.tabs.vendor');
}
});
Need some Guidance
Thanks