I have the following setup:
I have a header controller which controls the top navbar of the page. When entering a different route I want to change the nav layout. The problem I am having is that I can detect the route but only when the user refreshes the page.
Example:
<div data-ng-controller="HeaderController" >
...
<span>Product Name - {{layout}}</span>
...
</div>
My header controller:
angular.module('myApp.system').controller('HeaderController', ['$scope', 'Global', '$location', '$route', function ($scope, Global, $location, $route) {
...
$scope.layout = $location.path().includes('projectEditor');
...
}]);
When you select a button it opens a page with the route: projectEditor/1. But the span only updates when you refresh the page. My plan was to use a condition on the class but it only works when the user refreshes the page.
I'm using 1.5.5 version of angular.
How can I get that scope variable in my header controller to update on change of route anyone know ?
In order to know when the location change, you should use events :
https://docs.angularjs.org/api/ngRoute/service/$route#events
The solution Depends on the implementation you are using to route your application.
Here is an example with default angular router
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$scope.layout = 'newRoute';
}
I hope it may helps
Ok I figured it out I needed to use $routeChangeStart and update a $routeScope variable and then attach to that.
Thanks all!
Related
I have angularjs route with the following definition:
moduleA.config(function($routeProvider){
$routeProvider.
when('/A',{templateUrl:'A.jsp'}).
when('/B',{templateUrl:'B.jsp'}).
when('/C',{templateUrl:'C.jsp'}).
otherwise({
redirectTo: '/',
templateUrl: 'A.jsp'
});
});
Now, let say I click on something and it is redirected to #/C/ view. After refreshing the page, it is redirecting to view C and not to the default view.
I have to show default page after every page refresh happens.
I thought of changing the url to base url while refreshing the page, so that it can be redirected to default page. I am looking for better alternative for this through Angularjs way.
Thanks in advance.
Try this:
In the app.run() block inject 'window' and $location dependency and add:
window.onbeforeunload = function () {
$location.path('/');
};
Like #maurycy commented, If you want user to go to default page anytime a user he's comming to your application, you don't need the event.
just:
$rootScope.$on('$routeChangeStart', function (event, next, current) {
if (!current) {
$location.path('/');
}
});
in your app.run() function.
It should work
I built a simple application that has a home page, a login page and a contacts page, based on the Ionic example on Codepen. My application is here. Login controller sets a $rootScope.user variable when we log in:
.controller('LoginCtrl', function($scope, $rootScope, $state) {
$scope.login = function(){
$rootScope.user = {name:"lyman"};
$state.go("tabs.contact");
};
})
After login we correctly get redirected to the Contacts screen, Contacts tab is shown and highlighted. Now click on the Home tab. Expected behavior: I should see the Home page saying I'm logged in. What I get: the title changes to Home, Home tab is highlighted, but the view changes to templates/login.html template! You can still navigate to Contacts, log out from there, and then navigation stops working altogether. What am I missing?
Another oddity is that ng-show and ng-hide directives are being completely ignored when trying to hide and show tabs, only ng-if works. I'm thinking maybe the issue is because I'm using ng-if to insert and remove tabs from the markup and with ion-nav-view residing inside of the ion-tab tab? What would be the workaround?
So, yes, using ng-if to hide/show tabs will screw up navigation. The solution is to use the tab's hidden property as demonstrated in this fork of my original example:
<ion-tab title="Log In" icon="ion-ios-person" ui-sref="tabs.login" hidden="{{ loggedIn() }}">
<ion-nav-view name="login-tab"></ion-nav-view>
</ion-tab>
Controller:
.controller('TabsCtrl', function($scope, $rootScope) {
$scope.loggedIn = function() {
if ($rootScope.user) {
return true;
}
return false;
};
})
I am stuck at hiding and showing the login and logout buttons at the navbar. I am setting some cookies at LoginCtrl which belongs to login.html. When user logged in I am assigning rootscope to some variables which that variable assing to ngshow/hide in And getting those cookies in HomeCtrl. What i want to achieve is when I click log in button in the login.html Login element at the nav bar has to be gone and Username element has be to show. In plunker when I add some nested states like my local and result is the same. But when i remove the nested structure and add simple two state its start working.
Working Case:
.state('home', {
templateUrl:'home.html', ===>stores the navbar html
controller: 'HomeCtrl'
})
.state('login', {
templateUrl:'login.html',
controller:'LoginCtrl'
})
Not Working Case:
.state('home', {
templateUrl:'home.html, ===>stores the navbar html
controller: 'HomeCtrl'})
.state('home.login', {
templateUrl:'home.login.html',
controller:'LoginCtrl'})
Here is plunker when you logged in login button is in place but when you rerun the app Login button is gone.
http://plnkr.co/edit/tZuvyrAUD0yCN8a3K5lF
You problem was that you put 'some' key but get 'Some'. Here is your example: plnkr.co/edit/ZsT52SYFeRVCXpGYTMqK?p=preview
My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.
i have a normal navbar with a menuController, this is the parent.
then i have two other controllers a DashBoardController this is loaded on startup and a LoadDataController this is called if i click a Link in my navbar.
it do the routing with the routeprovider like this:
$routeProvider.when('/', {templateUrl: 'partials/dashboard.html', controller: 'DashBoardController'})
$routeProvider.when('/loadData', {templateUrl: 'partials/loadData.html', controller: 'LoadDataController'})
in my LoadDataController i have a function for example doSomething();.. and if i click on a link in my navbar it routes me to the loadData site.. there it should call the doSomething() function. i want not use ng-init i want do this with an broadcast event! The problem is now, if i click on the Link in my navbar, it delegates me to the loadData.html site and sends a broadcast event, but at this moment the $on method in my LoadDataController is not initialized so the method is never called. How can i solve this problem ? is it possible that i can initialize my DashBoard an LoadDataController on startup?so that both controllers the DashBoard and my LoadDataController are initialized if i enter my index site?
EDIT:
#Dayan no i want not call a special function every time at initialization! my menucontroller is initalized at startup and is the parent controller. below this controller are two other controllers my DashBoard and my LoadDataController. In my Navbar i have different links that should call different functions in my LoadDataController. The problem is now, that the broadcast event did not reach the LoadDataController because at this moment the $on method is not initialized.. for example.. i have in my navbar a link that calls a function in my navbarcontroller like this:
$rootScope.$broadcast('callFunctionInLoadDataControllerEvent', null);
$location.path('/loadData');
and in my LoadDataController i have the $on method that shoud call a special function like this:
$scope.$on('callFunctionInLoadDataControllerEvent', function(scope, data) {
$scope.specialFunction();
}
the problem is now, i send my broadcast and at this time the LoadDataCOntroller is not initialized(and so the $on mehtod is also not initialized, the event never reaches my controller), the initizations starts first, if i change the path with $location.path('/loadData');