I'm want to display a loading icon in my view, but I doesn't seem to work..
My view renders when my $resource in the resolve is loaded.
.run(['$rootScope', '$state', '$stateParams', function () {
$rootScope.$on('$stateChangeStart', function () {
console.log('start');
$rootScope.spinner = true;
});
$rootScope.$on('$stateChangeSuccess', function () {
console.log('end');
$rootScope.spinner = false;
});
}])
Can't set the spinner because my view isn't loaded yet..
How am I supposed to ng-show on my spinner div then..?
You can put the spinner to be outside of any view. That way you don't need to include it in any template but you'll still be able to control it with ng-show and watching state changes like you did.
I've solved it by putting my loading div outside of the ui-view.
Because it is outside the controller of the ui-view, I can just use the $rootScope.loading here.
<div ng-show="loading" class="loader">
<p>Loading, please wait...</p>
</div>
<div ui-view ng-class="{transparent: loading}"></div>
Related
TL;DR I have a modal state that I want to have a refreshable link. The modal state is opened with ng-click and ng-show. How can I make this modal linkable?
I have a modal window that I've given a custom URL. I have the modal window as a child state (screenings.images) in my config, and it shares the same controller as the parent (screenings), like so:
.state('screenings', {
url: '/screenings/',
templateUrl: 'pages/page.php',
controller: 'screeningsController'
})
.state('screenings.images', {
url: ":image/",
controller: 'screeningsController'
})
When an image in the screenings view is clicked, the URL navigates to screenings/red/, for example.
The modal has an ng-show directive attached to it:
<div ng-show="show" class="swiper-container">
The modal is opened with an ng-click on an image container:
<div ng-click="swipeShow()" class='img_div'>
This function swipeShow() and its counterpart swipeHide() are in the controller, like this:
$scope.swipeShow = function(){
$scope.show = true;
};
$scope.swipeHide = function(){
$scope.show = false;
}
From here, I'm not sure how to make the modal window URL refreshable.
What I've Tried
I've tried giving the child state a completely separate controller:
.state('screenings.images', {
url: ":image/",
controller: 'screeningsImagesController'
})
..and then in that new controller, I've tried automatically setting:
$scope.show = true;
..so that the modal should be set to already displaying. I figured that, if this controller is what is refreshed and loaded in, then it would automatically set <div ng-show="show=true" class="swiper-container">, but that's not the case.
In my ionic blank app, i have two html file index.html and category.html.
i write the controller for index.html in app.js like
.controller('AppCtrl',function($scope){
$scope.menu = function() {
console.log('yesytest');
window.location = "category.html";
};
})
this is working fine and after reaching the category page i create another controller in app.js
controller('categoryCtrl',function($scope){
console.log('ffffffffff');
$scope.beauty = function() {
console.log('yesytest');
window.location = "categorydetails.html";
};
});
i add a ng-click function on a button inside category.html but when i click on that button it is not calling the controller?
You can define your controller either on :
- defining it on your ui router state
.state('camera',{
url:"/camera",
cache: false,
controller:"CameraCtrl",
templateUrl:'app/views/loading/index.html'
})
Or by defining it into tour template category.html
<div ng-controller="categoryCtrl"> .... </div>
This is standard AngularJS feature, nothing special with ionic
If you use this :
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
You can use ui-sref="stateId" to do redirection
Example:
<a ui-sref="category"></a>
..Hi Kindly route your controller just define them..This might help.. --> http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/ ^_^
//app.js
.state('category',{
url:"/category",
controller:"categoryCtrl",
templateUrl:'templates/category.html'
})
//index.html
<a ng-href="#/category"></a>
I'm using AngularUI Router with Bootstrap. I have two views within the same state, and want to scroll to the second view when a button is clicked. I don't need to do any scrolling when the initial state and views load. I want the page to scroll to #start when the "Add More" button is clicked. I've attempted to use $anchorScroll to accomplish this, but am not having any luck.
Any suggestions on a good way to accomplish this?
HTML:
<!-- index.html -->
<div ui-view="list"></div>
<div ui-view="selectionlist"></div>
<!-- list.html -->
<div id="scrollArea"><a ng-click="gotoBottom()" class="btn btn-danger btn-lg" role="button">Add More</a>
<!-- selectionlist.html -->
<div class="row" id="start"></div>
Javascript for Controller:
myApp.controller('SelectionListCtrl', function (Selections, $location, $anchorScroll) {
var selectionList = this;
selectionList.selections = Selections;
this.selectedServices = Selections;
selectionList.gotoBottom = function() {
$location.hash('start');
$anchorScroll();
};
});
Javascript for Routes:
myApp.config(function ($stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
$uiViewScrollProvider.useAnchorScroll();
$urlRouterProvider.otherwise('/');
$stateProvider
.state('selection', {
url: '/selection',
views: {
'list': {
templateUrl: 'views/list.html',
controller: 'ProjectListCtrl as projectList'
},
'selectionlist': {
templateUrl: 'views/selectionlist.html',
controller: 'SelectionListCtrl as selectionList'
}
}
})
Yes, it is possible to autoscroll in AngularUI Router without changing states.
As mentionned previously in my comment, you need to call the scrolling function with an ng-click="gotoBottom()" instead of an ng-click="gotoSection()"
Also, the function definition gotoBottom() must be in the ProjectListCtrl, not in the SelectionListCtrl. This is because the call gotoBottom() happens in the list view:
'list': {
templateUrl: 'list.html',
controller: 'ProjectListCtrl as projectList'
}
As gotoBottom() is called from the list.html view, the corresponding controller in $stateProvider must be the one where you define gotoBottom().
Here are two working ways of accomplishing your goal:
1. You inject $scope inside the controller ProjectListCtrl. You then define the $scope.gotoBottom function in the same controller.
The scope is the glue between the controller and the view. If you want to call a controller function from your view, you need to define the controller function with $scope
app.controller('ProjectListCtrl', function ($location, $anchorScroll,$scope) {
var selectionList = this;
//selectionList.selections = Selections;
//this.selectedServices = Selections;
$scope.gotoBottom = function() {
console.log("go to bottom");
$location.hash('start');
$anchorScroll();
};
});
In the list.html view, you can then call the $scope.gotoBottom function just with gotoBottom(): ng-click="gotoBottom()"
2. Or you use the controller as notation, as when you wrote ProjectListCtrl as projectList.
this.gotoBottomWithoutScope = function(){
$location.hash('start');
$anchorScroll();
};
With this notation, you write this.gotoBottomWithoutScope in the ProjectListCtrl. But in the view, you must refer to it as projectList.gotoBottomWithoutScope().
Please find a working plunker
To learn more about the this and $scope notations, please read this:
Angular: Should I use this or $scope
this: AngularJS: "Controller as" or "$scope"?
and this: Digging into Angular’s “Controller as” syntax
I just added ui-bootstrap to my package based on the angular-fullstack-generator. Before that I used the following code to collapse the navbar on small devices when the route changes:
$rootScope.$on('$stateChangeSuccess', function (event, next) {
// collapse navbar
angular.element('.navbar-collapse').collapse('hide');
});
This is not possible anymore because of the directives as I understand from #1672 but how I can manually collapse the navbar then?
Thanks in advance,
Michael
You can collapse the navbar on click (it feels more natural to me) simply by adding (or enhancing) the ng-click handler on each <a>:
<a ng-href="{{item.link}}" ng-click="isCollapsed=true">{{item.title}}</a>
{{ 'LANG_BUTTON_EN' | translate }}
If you really want it after the $stateChangeSuccess event, add the same event listener to your navbar.controller.js (no need to listen to the $rootScope though - or is this event limited there? I do not know so please use caution):
angular.module('jayMapApp')
.controller('NavbarCtrl', function ($scope, $location, $translate, Auth) {
...
$scope.$on('$stateChangeSuccess', function (event, next) {
$scope.isCollapsed = true;
});
...
I am not sure how this can be achieved in Angular. I want to add and remove CSS class on route change. I am trying to Show and Hide vertical menu. Currently I am using ui-route. Any Suggestion or link to example would be appreciated or any other suggestion on different approach to my problem is also welcome
Easiest and most efficient way:
angular.module(...).run(function($rootScope, $state) {
$rootScope.$state = $state;
});
<div ng-if="$state.contains('someState')">...</div>
This will remove the DOM which will improve performance if the menu has lots of bindings.
However, I constantly tell people to consider leveraging named views for navigation:
<body>
<nav ui-view="nav"></nav>
<div class="container" ui-view></div>
</body>
$stateProvider.state('home', {
views: {
'nav#': {
templateUrl: 'nav.html'
}
'': {
// normal templateUrl and controller goes here.
}
}
});
The cool part about this is that children states can override and control what nav file to use, and can even setup resolves and controllers that share data between the nav and the content. No directives/services needed!
Finally, you can do these too:
<nav ng-show="$state.contains('somestate')"></nav>
<nav ng-class="{someClass:$state.contains('somestate')}"></nav>
Alternatively checkout ui-sref-active
All of my suggestions primarily assume you're using UI-Router since it's the best!
Try this:
app.run(function ($rootScope) {
$rootScope.$on("$stateChangeStart", function(event, toState, fromState){
if (toState.url === "/path") {
$('div').addClass('className');
} else {
$('div').removeClass('className');
}
});
});
You can register the route changed and add this css to your DOM:
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
// Add your logic, for instance:
$('body').addClass('hide-menu');
});
Obviously there are events raised before the route has been changed: "$locationChangeStart", here.
/Edit/ - Better approach
Also I would rather using the ng-class attribute and simple bind a certain value from your main controller to it.
app.controller('MainController', function ($scope) {
$scope.toggleMenu = function(isToShow) {
$scope.isVisibleMenu = isToShow == true;
};
});
then in your html:
<!-- Menu toggle button-->
<button ng-click="toggleMenu()"></button>
<div class="toggleable-menu" ng-class="{'visible-menu': isVisibleMenu}">
<!-- The menu content-->
</div>
and the simplest CSS possbile (you can obviously add animations or any other thing to toggle this menu.)
.toggelable-menu {
display: none;
}
.toggelable-menu.visible-menu {
display: block;
}