the controller get executed before i could even click the the ng-cliclk="logout()" how can i prevent this
JS:
.controller('logOutCtrl', function($scope, taskref, $state) {
if (taskref.unauth()) {
$state.go('tabsController.pendingTasks');
} else {
$state.go('login');
}
})
Template:
<ion-list data-componentid="list5">
<ion-item ui-sref="settings" menu-close="" data-componentid="list-item9">Settings</ion-item>
<ion-item ui-sref="reminders" menu-close="" data-componentid="list-item10">Help & Reminders</ion-item>
<ion-item ui-sref="login" menu-close="" ng-controller="logOutCtrl" ng-cliclk="logout()" data-componentid="list-item12">Log out</ion-item>
</ion-list>
Controller is also like a function which executes when we use it with ng-controller. So You should create the $scope.logout() function in logOutCtrl and add related logout code in that function instead of writing code openly in controller.
Modified Controller:
.controller('logOutCtrl', function($scope, taskref, $state) {
$scope.logout = function(){
if (taskref.unauth()) {
$state.go('tabsController.pendingTasks');
} else {
$state.go('login');
}
}
})
Modified Template:
<ion-list data-componentid="list5">
<ion-item ui-sref="settings" menu-close="" data-componentid="list-item9">Settings</ion-item>
<ion-item ui-sref="reminders" menu-close="" data-componentid="list-item10">Help & Reminders</ion-item>
<ion-item ui-sref="login" menu-close="" data-componentid="list-item12">Log In</ion-item>
<ion-item menu-close="" ng-controller="logOutCtrl" ng-click="logout()" data-componentid="list-item12">Log out</ion-item>
</ion-list>
Related
So here I go with my first question.
I am trying to use ng-repeat to render data from the server, but it's not displaying anything.
this is the code for my controller
.controller('ExampleController', function($scope, $http) {
var url = "https://lari.jumpstart.ge/en/api/v1/commercial_banks?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function(data) {
$scope.results = data.results;
})
.error(function(data) {
alert("ERROR");
});
});
this is the ng-repeat in my view
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content >
<ion-item ng-controller='ExampleController' ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
</ion-pane>
</body>
</html>
this is the array on the server
{
"valid":true,
"results":[
{
"code":"BAGA",
"name":"Bank Of Georgia",
"currencies":[
"AED",
"AMD",
"AUD",
]
},
{
"code":"TBCB",
"name":"TBC Bank",
"currencies":[
"AED",
"AUD",
"AZN",
]
},
The erroneous code has the ng-controller directive on the same node as the ng-repeat directive.
<!-- Replace THIS
<ion-content >
<ion-item ng-controller='ExampleController' ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
-->
<!-- With THIS -->
<ion-content ng-controller='ExampleController' >
<ion-item ng-repeat='x in results'>
{{x.code}}
</ion-item>
</ion-content>
The ng-repeat directive needs to be on a child node from the ng-controller.
$http returns a promise though. check the error in the console and see what it says. Look into moving the code in the controller into a factory/service and then assign, whatever value this controller or service returns, to the $scope
If the example you give of the array on your server is correct, then all you need to do is change $scope.results = data.results; to $scope.results = data.results.results;, because otherwise it will not be able to iterate over the array of your response data. On the other hand, if that doesn't work, try changing {{x.code}} to {{x}} to see what the output is.
On my Ionic App, I have a view that has a button. When you click on the button, a list of player would be served in a modal, when clicked on a player name, the name of the selected player should be shown on the page and the button should be hidden.
Here's the codepen for the same - http://codepen.io/mradul/pen/vNywqG
However, when I select a value(player name) on the modal, the scope variable gets updated(as it's printed on the console), but the change is not reflected on the page.
HTML -
<ion-header-bar class="bar-positive bar-header">
<h1 class="title">Selected Player</h1>
</ion-header-bar>
<ion-content>
<script id="select-player.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose Player</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="player in getPlayerList().players" ng-click="closeModal(player)">
{{player}}
</ion-item>
</ion-list>
</ion-content>
</div>
</script>
<br/><br/>
<div id="player">
{{sc.player}}
<div class="row">
<a class="button" ng-click="openModal()" ng-show="sc.player.playerName == null">Set player</a>
<div ng-hide="sc.player.playerName == null">
<div class="col col-33 " > {{sc.player.playerName}}</div>
</div>
</ion-content>
JS -
angular.module('ionicApp',['ionic']).controller('scoringController', function ($scope, $ionicModal) {
$scope.player = {playerName:""};
$scope.getPlayerList = function () {
console.log("getting player list");
return {
"players": [
"Mradul",
"JAin",
"Phunsuk Wangdu",
"Hulk"
]
};
};
$ionicModal.fromTemplateUrl('select-player.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
})
$scope.openModal = function () {
console.log("Setting model open ");
$scope.modal.show()
}
$scope.closeModal = function (playerName) {
$scope.player.playerName = playerName;
//$scope.activePlayers[0] = playerName;
console.log("Player Set ", $scope);
console.log("model closed");
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
});
Player was initially a primitive(string), but I changed it into an object by having a property - playerName. May be I didn't do it right. Please suggest how can I have the parent scope variable updated correctly. I might have missed something very basic.
Write $scope.$apply() after your change
Try this, Am not sure about it
{{player.playerName}}
I have this code to show loading message.
<ion-view title="Rooms">
<ion-content>
<ion-list ng-show="rooms">
<ion-item class="item-icon-left" ng-repeat="room in rooms" type="item-text-wrap" ng-click="openChatRoom(room.id)">
<i class="icon {{room.icon}}"></i>
<h2>{{room.name}}</h2>
</ion-item>
</ion-list>
<ion-list ng-hide="rooms.length">
<ion-item class="textCenter">
<i class="icon ion-loading-c"></i> Loading Rooms
</ion-item>
</ion-list>
</ion-content>
What it does now is just showing "loading Rooms" for awhile and nothing shows up.
But when I change page and return to this page again, items in ng-show just shows up and never show "loading Rooms" again.
So why this ng-show doesn't reveal instantly? Below are its controllers
.controller('RoomsCtrl', function($scope, Rooms, Chats, $state, $ionicModal) {
//console.log("Rooms Controller initialized");
$scope.rooms = Rooms.all();
console.log($scope.rooms);
$scope.openChatRoom = function (roomId) {
$state.go('app.chat', {
roomId: roomId
});
};
})
.factory('Rooms', function ($firebase) {
// Might use a resource here that returns a JSON array
var ref = new Firebase(firebaseUrl);
var rooms = $firebase(ref.child('rooms')).$asArray();
return {
all: function () {
return rooms;
},
get: function (roomId) {
// Simple index lookup
return rooms.$getRecord(roomId);
}
}
});
I have just started to adapt the sample angular/ionic tab navigation app and have run into a problem.
When I click on a link in one view (a list of all journeys), I should be taken to a screen with details about that particular journey. (Adapted from the 'chats' in the sample app.
It doesn't quite work however. The URL changes to the expected URL but the view/page doesn't change at all. When I try to refresh the page, I am taken back to my default state/page.
The controllers are:
.controller('JourneysController', function($scope, $log, JourneyHandler) {
'use strict';
$log.debug('Activating the journey controller');
$scope.journeys = JourneyHandler.getJourneys();
})
.controller('JourneyDetailController', function($scope, $stateParams, $log) {
'use strict';
$log.debug('Activating the journey detail controller');
$scope.journey = {
journeyId: 0,
journeyStart: new Date()
};
})
The app.js defines the states as:
.state('tab.journeys', {
url: '/journeys',
views: {
'tab-journeys': {
templateUrl: 'templates/tab-journeys.html',
controller: 'JourneysController'
}
}
})
.state('tab.journey-detail', {
url: '/journey',
views: {
'tab-journey-detail': {
templateUrl: 'templates/journey-detail.html',
controller: 'JourneyDetailController'
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
and the relevant templates are:
tab-journeys.html
<ion-view view-title="My Journeys">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="journey in journeys" type="item-text-wrap" href="#/tab/journey">
<h2>{{journey.journeyId}}</h2>
<p>{{journey.routeId}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
and journey-detail.html
<ion-view view-title="Journey Detail">
<ion-content>
<p>This is where the journey details will go.</p>
</ion-content>
</ion-view>
There are no errors in the console so I really can't understand why it's not working.
When I encountered this same problem, I discovered that the error occurs because the controller didn't load.
Comment the controller in the state declaration and see if it works. You will need to check the controller.
I have started sideMenu app in ionic and tried some implementation. Initially, ionicModal is used to show login so i change it with ion-list item like;
<ion-side-menu side="left" >
<ion-header-bar class="bar-stable bar-dark">
<a ng-click="redirectToWeb()" > <h1 class="title">NerdApp</h1></a>
</ion-header-bar>
<ion-content >
<ion-list class="BGcolorDG">
<ion-item nav-clear menu-close class="BGcolorDG item item-icon-left item-content-modified" href="#/app/login" ng-show="control.showLogin" > <!--ng-click="login()" -->
<i class="icon ion-locked"></i> <span>Login</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/search" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-search"></i><span>Search</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-ios-browsers"></i><span>Browse</span>
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists" class="item item-icon-left BGcolorDG item-content-modified">
<i class="icon ion-music-note"></i> <span>Playlists</span>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
and provide routeState as
state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.login', {
url: "/login",
views: {
'menuContent': {
templateUrl: "templates/login.html",
controller: "LoginCtrl"
}
}
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: "HomeCtrl"
}
}
})
And default route to home controller.
$urlRouterProvider.otherwise('/app/home');
the app controller is as
.controller('AppCtrl', function($scope,$timeout,$location,$rootScope) {
$scope.control = {
showLogin:true
};
if($rootScope.showLogin != undefined && $rootScope.showLogin == false){
$scope.control.showLogin = false;
}
})
Inside loginControl i am checking and redirecting it back to home controller as
$scope.login = function() {
if ($scope.loginData.username == 'hassaan' && $scope.loginData.password == 'khan') {
$rootScope.showLogin = false;
// $location.path('#/app');
$state.go('app.home');
}else{
alert('Incorrect credentials');
}
}
i have tried both $location.path and $state.go and what its doing is redirecting to home page but 'not showing the sidemenu' and when i inspect in browser it showing sidemenu hidden.
The flow images of test app is as
Try use $rootScope
pass it to AppCtrl
.controller('AppCtrl', function (...., $rootScope) {
// and then
$rootScope.control = {
showProfile: false
};
after success authentication - make it true
$rootScope.control = {
showProfile: true
};
now it should work as you expected
Don't use $rootscop if you dont need to.
You can send variables to other controllers with the router from angular using params.
.state('menu.employeeInfo', {
url: '/employeeInfo',
views: {
'side-menu21': {
templateUrl: 'templates/employeeInfo.html',
controller: 'employeeInfoCtrl'
}
},
params: {
appointmentObj: null,
subassignmentObj: null
}
})
You can then pass these vars in the following manner.
$scope.gotoAppointment = function (Appointment, Subassignment) {
$state.go('menu.employeeInfo', { appointmentObj: Appointment, subassignmentObj: Subassignment }, { reload: true });
}