I have a ion menu which contain 2 links , Dashboard, favorite.
At the very first time Dashboard page is loaded for application with content. Now when i switch to another menu item. My Content seems populated first after that side menu hides. This causes user experience using the app is bad.
Can we hide side menu first then populated content.
I also tried following steps
<ion-list>
<ion-item menu-close href="#/app/articles" ng-click="toggleLeft()">
Dashboard
</ion-item>
<ion-item menu-close href="#/app/favourite" ng-click="toggleLeft()">
Favorite
</ion-item>
</ion-list>
and
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
which also doesn't make any effect .
Here is my Dashboard page:-
<ion-view>
<ion-content>
<ion-list can-swipe="true">
<ion-item class="list article-list" ng-repeat="article in articles">
my divs
</ion-item>
</ion-list>
</ion-content>
</ion-view>
and controller is :
.controller('ArticleCtrl', function($scope, $rootScope ,articleService) {
//This is fetching data from database (**Sql lite**)
articleService.fetchArticles().then(function(articles){
$rootScope.articles = articles;
}
});
Similar code for Favorite with different controller.
Any suggestions?
Thanks
This is actually default behaviour but it can be changed. Ionic offers a few events that can be watched and you can than control when to do something. In your case I would populate the $scope only after the view fully enters the screen.
$scope.$on('$ionicView.enter', function (viewInfo, state) {
$scope.data = _getData();
});
So basically the data that you are filling the view with needs to be associated with the $scope only when the view is fully visible.
Edit:
.controller('ArticleCtrl', function($scope, $rootScope ,articleService) {
//This is fetching data from database (**Sql lite**)
var _articles;
articleService.fetchArticles().then(function(articles){
_articles = articles;
}
$scope.$on('$ionicView.enter', function (viewInfo, state) {
$scope.articles = _articles;
});
});
Related
Here is my controller :
.controller('RouteController', function($scope,$timeout, $stateParams, Account) {
$scope.showRouteByCity= function(cityName){
Account.getRouteByCity(cityName).then(function (response) {
$scope.routesByCities = response.data.routeSatart;
console.log($scope.routesByCities);
});
}
}
Here I send array of objects. When i check console, i can see this :
And when i try to use ng-repeat for this object i only get blank screen.
Here is my code from view
<ion-view view-title="All routes">
<ion-content>
<ul>
<li ng-repeat=" tt in routesByCities">{{tt.time}}</li>
</ul>
</ion-content>
</ion-view>
Is there some special method to send variable to view? If I use fucntion or I made some error that i can't see.
Here is what i get in response :
Account.getRouteByCity(cityName) - reponse
SOLUTION 1.
For some reasone, when I use function, it don't want to show me info on view. I found this solution and it works. It's not so clean and nice, so if someone else have any other solution, please, share it.
var cityName = $stateParams.city;
Account.getRouteByCity(cityName).then(function (response) {
$scope.routesByCities = response.data.routeSatart;
console.log($scope.routesByCities);
});
Here I use StateParams to get city name form Url and then i show routes.I don't understand why it don't work with function()...
Try this
<ion-view view-title="All routes">
<ion-content>
<ul ng-repeat=" item in routesByCities">
<li>{{item.time}}</li>
</ul>
</ion-content>
</ion-view>
OR
<ion-content>
<ion-item collection-repeat="item in routesByCities">
{{item.time}}
</ion-item>
</ion-content>
Ok so I have a situation where I want a click of a side menu item to change the content within the same main view.
Here's a bit of my menu.html:
<ion-item menu-close href="#/app/recipes" ng-click="showFeaturedRecipes()">
Featured Recipes
</ion-item>
<ion-item menu-close href="#/app/recipes" ng-click="showRecipeCategories()">
Recipe Categories
</ion-item>
<ion-item menu-close href="#/app/recipes" ng-click="showAllRecipes()">
All Recipes
</ion-item>
Here's the recipes state (in recipes.html template):
<div class="list card" ng-repeat="recipe in recipes">
...
</div>
And the recipes controller:
.controller('RecipesCtrl', function($scope, $http, $recipes) {
$recipes.getRecipes().then(function(data){
$scope.recipes = data;
});
})
That all works fine, as it uses the $recipes factory to get data from the server and show on page load (i.e. when RecipesCtrl is initiated as it's the state controller)
My issue is that when I click the menu item Featured Recipes, I want the $scope.recipes to change from listing all recipes to just the featured list, but as the function for showFeaturedRecipes() is in the AppCtrl, it doesnt change the same $scope.recipes value:
.controller('AppCtrl', function($scope, $recipes) {
...
$scope.showFeaturedRecipes = function(){
$scope.recipes = $recipes.getFeaturedRecipes();
}
...
})
So essentially at the moment I have a $scope.recipes in the side menu, and one in the actual page content, but they aren't linked.
Any help would be appreciated.
Thanks
The best way is to use different routings for different links. So your menu will be:
<ion-item menu-close href="#/app/recipes?featured=1">
Featured Recipes
</ion-item>
<ion-item menu-close href="#/app/categories">
Recipe Categories
</ion-item>
<ion-item menu-close href="#/app/recipes">
All Recipes
</ion-item>
I believe recipes and categories must have separate view/controllers and featured recipes is just a filter for all recipes.
I want to show options while pressing the button not to show dropdown box. For the reference of select. But when I try to implement it gives me dropdown box. I don't want to show it. I want to show options.
Hi This is worked for me based upon your requirement, Please have a look:
1.In your index.html add a button with a method as
<ion-content ng-controller="ExampleCtrl">
<button class="button button-bar button-positive" ng-click="showSelect()">Options</button>
</ion-content>
2.In your app.js file write the controller code with function as:
.controller('ExampleCtrl', ['$scope', '$ionicPopup',function($scope,$ionicPopup) {
$scope.values=['1','2','3','4'];
$scope.showSelect = function(){
$ionicPopup.alert({
title:'select an option',
templateUrl:'test.html'
});
}
}])
3.last and final step create a test.html file in your project and paste the code as:
<ion-view view-title="select">
<ion-content ng-controller="ExampleCtrl">
<ion-list ng-repeat="item in values">
<ion-item>
{{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Having any queries,Please reply..
I have two states/views called bookmark and bookmarked.
The bookmark view has a button which passes an url into a function called setURL. This function sets the src for the iframe on the bookmarked view.
<ion-view view-title="Bookmarks">
<ion-content>
<button class="button" ui-sref="myLearning.bookmarked" ng-click="setURL('SOMEURL')">Bookmark</button>
</ion-content>
<div class="bar bar-footer bar-assertive"></div>
</ion-view>
The bookmarked view has an iframe whose src is set by the button on the previous view. The src is currently set to nothing because I would never navigate to this view unless I've clicked the bookmark button which would pass in an url.
<ion-view view-title="Bookmarked">
<ion-content>
<iframe id="learningFrame" src="" width="100%" height="100%" seamless></iframe>
</ion-content>
</ion-view>
When I run the app and navigate to the bookmark view and click on the bookmark button, it navigates to the bookmarked view but it displays a blank page in the iframe (src="") rather than using the url passed in from the function. However, from this blank page if I navigate to the bookmarks view and click on the bookmark button the second time, the actual url loads.
Why does it the view not use the url that I have passed in through setURL, on the first load?
This is what the function looks like:
.controller('bookmarkCtrl', function($scope){
$scope.setURL = function(currURL){
document.getElementById('learningFrame').src = currURL;
};
});
I don't know why it does not work the first time...
Any help would be appreciated, thank you.
Instead of doing DOM manipulation from the controller you could simply use ng-src that would have {{}} to have decide src attribute value.
Markup
<ion-view view-title="Bookmarked">
<ion-content>
<iframe id="learningFrame" ng-src="{{learningFrameUrl}}" width="100%" height="100%" seamless></iframe>
</ion-content>
</ion-view>
Controller
.controller('bookmarkCtrl', function($scope){
$scope.setURL = function(currURL){
$scope.learningFrameUrl = currURL;
};
});
Update
As you wanted to share data between you controllers then you could use service/factory component. Then you can use that service by injecting it inside your controller/directive wherever you wanted to use it.
Service
app.service('dataService', function(){
this.learningFrame = {
Url: ''
};
//..other stuff here..//
});
Controller
.controller('bookmarkCtrl', function($scope, dataService){
$scope.setURL = function(currURL){
//this can be available in other controller
//wherever you take value from learningFrameUrl
$scope.learningFrame = dataService.learningFrame;
dataService.learningFrame.Url = currURL;
};
});
I'm working on a chatapp and like most chatapps my app shows a list of messages.
The list is generated with ng-repeat.
I have reversed the messages so that the newest are at the bottom and
oldest at the top.
Currently when my app loads the list is scrolled down with
$ionicScrollDelegate
I don't like it doing it this way. It's not the correct way and sometimes this gives me some performance and loading issues when opening my app.
I was wondering if there is another, forced way, to start/render the list from the bottom to the top without the need for scrolling it to the bottom like I do now.
This is the code I currently use:
In my HTML:
<script type="text/ng-template" id="home.html">
<ion-view ng-controller="HomeController" title="Home">
<ion-content>
<ion-list>
<ion-item ng-repeat="message in messages track by $index">
{{message}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
In my app.js:
app.run(function($ionicPlatform, $state, $timeout, $localStorage, $location, $rootScope, $ionicScrollDelegate) {
document.addEventListener('deviceReady', function() {
setTimeout(function() {
$ionicScrollDelegate.scrollBottom(true);
}, 500);
});
})
Add a watch instead:
$scope.$watch('messages', function(newValue, oldValue) {
$ionicScrollDelegate.scrollBottom(true);
}, true);
The reason you are getting this behaviour is cause deviceReady does not guarantee that the items are rendered yet, which causes your list to not scroll anywhere at all. With a watch, you'll scroll when the array has been loaded and the values are already there.