I have got a main index page, in which i initially hide the footer bar. But i want to display it when some item is clicked in some child view. I can see in the logs the model is getting changed, but its not getting reflected in the view.
index page:
<body ng-app="starter">
<ion-pane ng-controller="AudioCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<ion-content></ion-content>
<ion-footer-bar ng-hide="musicBar.hide">
<div class="audio-block">
.....
</div>
</ion-footer-bar>
</ion-pane>
</body>
The child view page:
<ion-view ng-controller="AudioCtrl as controller" title="{{selectedCategory}}">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items" ng-click="$parent.songClicked()">{{item.desc}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
The angular code:
app.controller('AudioCtrl', function ($sce, $scope) {
$scope.musicBar= {
hide: true
};
$scope.songClicked = function(){
console.log($scope.musicBar.hide);
$scope.musicBar.hide = false;
console.log($scope.musicBar.hide);
};
}
);
When i click the item i can see musicBar.hide changing from true to false, but its not reflected in the view. I have also check other similar questions but the solution doesn't work. I have tried using $scope.$digest() and $scope.$apply(), but then i get apply already in progress.
The index.html and the cub view are each managed by their own instance of AudioCtrl, each having their own scope.
The header is made visible when the main view scope's musicBar.hide becomes true, but that never happens, because the subview doesn't modify it. It modifies the sub view scope's musicBar.hide variable.
I don't see any reason why a sub view would have the same controller as the main view. It shouldn't.
Related
Running an Ionic v1 app, in my template page I have:
<ion-view>
<ion-nav-title>
<div id="navTitle"></div>
</ion-nav-title>
<ion-content>
</ion-content>
</ion-view>
From the view controller, I am trying to get the div element with: var el = document.getElementById("navTitle"); but its errors indicating the el is null. It seems ionic can't see elements outside of the ion-content
How can I get the element?
I figured it out. Turns out I needed to add a slight delay to a function that was being called when the controller was entered. The function was trying to access the dom element before it was set in the ion-nav-title section.
setTimeout(function() {
doFunction() ;
},500) ;
Its not ideal, but it did the trick
UPDATE:
I found a better way. Elements outside of the ion-content should be assigned an ng-model, and then the model can be accessed from the normal scope:
<div id="navTitle" ng-model="$parent.navTitle"></div>
<ion-content>
...
</ion-content>
Then in the controller, it can accessed with $scope.navTitle
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;
});
});
I am setting the scope with data but all the time getting empty screen.
tried to use some $scope.$apply but it isn't helping.
I can see the scope.items isn't empty...
I can see values only one I click on other tabs.
my code:
.controller('AccountCtrl', function ($scope, $timeout) {
if (localStorage.getItem("itemHistory") !== null) {
$scope.items = localStorage["itemHistory"].split(',');
$scope.$safeApply($scope);
}
});
tab that navigate to template
<!-- Dashboard Tab -->
<ion-tab title="History" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
my temp:
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-view view-title="Recent Searches">
<ion-content class="padding">
<ul>
<li ng-repeat="item in items">
{{ item }}</li>
</ul>
</ion-content>
</ion-view>
thanks for helping!
I dont see anywhere in your view where the items is being referred. Can you please provide a jsfiddle where I can see the problem? otherwise just looking at this code, I cant make out anything.
And you should not be using explicit apply in this case. apply is a very dangerous call which has to be used with lot of due diligence. It would trigger a digest cycle that trickles up till the rootscope which is what you may NOT want.
I find the issue, it was simple mistake on app.js didnt set the correct view on the app.js
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 need to show and hide back button in different pages/views. I took reference from Justin Noel:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
App controller to toggle button display:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$scope.hideBackButton = true;
else
$scope.hideBackButton = false;
})
But this doesnt work as controller is called only once but not at the change of view in different states. Also changing the value of $scope.hideBackButton from other controllers(linked to different states) does not have any effect on the button display.
Can anyone tell me how to toggle back-button display on each navigation. What am I missing here?
I had exactly same problem today.
Simplest solution is to use $ionicNavBarDelegate:
.controller('AppCtrl', function($scope, $location, $ionicNavBarDelegate) {
var path = $location.path();
if (path.indexOf('submit') != -1)
$ionicNavBarDelegate.showBackButton(false);
else
$ionicNavBarDelegate.showBackButton(true);
})
You can also wrap hideBackButton value in object and your code will work:
.controller('AppCtrl', function($scope, $location) {
var path = $location.path();
$scope.options = $scope.options || {};
if (path.indexOf('submit') != -1)
$scope.options.hideBackButton = true;
else
$scope.options.hideBackButton = false;
})
It works because in JS (as in many other languages) booleans are passed by value and object are passed by the referance and it affects how default Angular watchers are created.
The downside of this method is that hidding of the button is not as smooth as in other ionic solutions.
Just in case, this is how your html should look like:
1st solution:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
</body>
2nd solution:
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button hide-back-button="{{options.hideBackButton}}">
</ion-nav-back-button>
</ion-nav-bar>
</body>
The hide-back-button attribute on <ion-view> did the trick for me: <ion-view hide-back-button="true">
See the official documentation here.
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('app.home');
Ionic 2 & 3:
<ion-navbar [hideBackButton]="true">
A very simple way to achieve this is to apply the menu-close directive to your button/anchor. Technically it's meant for closing the menu, but you can use it on any link and it will bypass the slide animation & won't show the back button.
<a menu-close href="#/home">Home</a>
http://ionicframework.com/docs/api/directive/menuClose/
$ionicHistory.nextViewOptions({
disableBack: false,
historyRoot: true
});
That seems a good option to use, works fine for me.
You can change the cache settings so that when the page is reloaded the controller is called again:
http://ionicframework.com/docs/api/directive/ionNavView/
The hide-back-button attribute should be set on ion-view tag.
I had problems with "hide-back-button", since it hides the menu and the back button.
Somehow this.navCtrl.push played with the back button, in case you want the menu to be displayed using this.nav.setRoot(yourPage)