We Keep Coding

Refresh a state without refreshing its master view in Angular

How can I refresh the 'detail' state without refreshing its parent (item).
in routes:
$stateProvider.state('item.detail', {
url: '/:id/detail',
abstract: true,
resolve: {
$modal: ['$modal', function ($modal) {
return $modal;
}]
},
onEnter: ['$state', '$modal', function ($state, $modal) {
$modal
.open({
templateUrl: 'detail.html',
backdrop: 'static'
})
.result.then(function () {
$state.transitionTo('item.detail', {id: $state.params.id}, {reload: true});
})
;
}]
})
This refreshes the item and detail together.
Adding the state the to reload also doesn't work.
Any idea what I'm doing wrong?

Is this what you want to do, I think the interesting part if the reload argument (that you are using):
If reload is a string (or state object), the state object is fetched
(by name, or object reference); and \ the transition reloads the
resolves and views for that matched state, and all its children
states.

$state.go in resolve not working

So I have these routes set up:
.state('createOrder', {
url: '/customer-services/orders/create',
templateUrl: 'tpl/customerServices/orders/save.html',
controller: 'SaveOrderController',
controllerAs: 'controller',
resolve: {
order: ['SaveOrderService', function (shared) {
shared.order = { forDelivery: true };
}]
},
data: {
requireLogin: true,
pageTitle: 'Add order'
}
}).state('createOrder.lines', {
url: '/lines',
views: {
'#': {
templateUrl: 'tpl/customerServices/orders/save/line.html',
controller: 'SaveOrderLinesController',
controllerAs: 'controller'
}
},
resolve: {
validate: ['$state', 'SaveOrderService', function ($state, shared) {
// If we don't have an account number
if (!shared.order.accountNumber) {
console.log('redirecting');
// Redirect to the create order view
$state.go('createOrder');
}
}]
},
data: {
requireLogin: true,
pageTitle: 'Add order : Lines'
}
})
But the state does not change. I thought that there might be an error somewhere, so I subscribed the the state events like this:
// On state change
$rootScope.$on('$stateChangeStart', function (event, toState) {
var data = toState.data; // Get our state data
var requireLogin = typeof data === 'undefined' ? false : data.requireLogin; // Check to see if we have any data and if so, check to see if we need login rights
var user = service.get(); // Get our current user
console.log(toState);
$rootScope.currentUser = user; // Set our current user on the rootScope
// If we require login rights and we are not authenticated
if (requireLogin && !user.authenticated) {
event.preventDefault(); // Stop processing
$state.transitionTo('login'); // And redirect to the login page
}
});
$rootScope.$on('$stateNotFound', function () {
console.log('state not found');
});
$rootScope.$on('$stateChangeError', function () {
console.log('state errored');
});
$rootScope.$on('$stateChangeSuccess', function () {
console.log('state changed');
});
and when I refresh my lines view, the console outputs this:
Object { url: "/lines", views: Object, resolve: Object, data: Object, name: "createOrder.lines" } app.js:42:9
redirecting app.js:2436:21
Object { url: "/customer-services", templateUrl: "tpl/customerServices/index.html", controller: "CustomerServicesController", controllerAs: "controller", data: Object, name: "customerServices" } app.js:42:9
state changed app.js:63:9
Object { order: Object, account: null, collectionPoint: null }
As you can see, the states think they have changed, but I still see the createOrder.lines view.
Does anyone have any idea why?

I think you'll need to wrap the $state change in a function that will trigger a digest cycle whilst also rejecting the promise in the resolve method...
$timeout(function() { $state.go("createOrder") });
return $q.reject("Rejection message!");
Remember to inject $timeout and $q into your resolve function! =)
Should also add that rejecting the resolve will fire stateChangeError.

So, it turns out you don't need the promise. Just adding the timeout works.
I found another post which suggests that the timeout is needed to avoid digest issues (which I am guessing is what is causing my states to not change).
Here is the final code:
validate: ['$state', '$timeout', 'SaveOrderService', function ($state, $timeout, shared) {
// If we don't have an account number
if (!shared.order.accountNumber) {
// Timeout to avoid digest issues
$timeout(function () {
// Redirect to the create order view
$state.go('createOrder');
});
}
}]

AngularJS: Preventing user from accessing a certain state

I'm building an app using sails.js backend and angular in frontend. I'm trying to prevent the user from accessing the admin control page if he's not authorized. I've run into couple of answers already, but none of them seem to fully work.
At the moment in my app.js, I have
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home/homeTemplate.html",
controller: 'homeController'
})
.state('adminPage', {
url: "/adminPage",
templateUrl: "adminPage/adminTemplate.html",
controller: 'adminPageController',
resolve: {
validate: function($q, $sails, $location) {
var defer = $q.defer();
$sails.get("/user/getCurrentUser")
.success(function(response) {
if (response.user.accessAdminPage) {
defer.resolve();
}
else {
defer.reject("Access blocked");
$location.path('/');
}
return defer.promise;
})
}
}
})
The current code is partially working; The problem at the moment is, that when the unauthorized user first logs in and lands on the home page, and then accesses localhost:1337/#/adminPage, he actually reaches the page. The url in the address bar changes to localhost:1337/#/home but the user isn't redirected. Now the weird part is, when accessing the home page afterwards through the navbar and trying to access the admin page again, the user IS redirected to the home page as intended (although there's an annoying 'flash' while the page is reloaded).
For other people asking, this kind of handling has worked, and I'm wondering what I may have missed and generally any reasons for why my current solution isn't working.

You are returning promise from success function, this will never work.
You should return defered.promise (promise object) from outside success function.
CODE
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home/homeTemplate.html",
controller: 'homeController'
})
.state('adminPage', {
url: "/adminPage",
templateUrl: "adminPage/adminTemplate.html",
controller: 'adminPageController',
resolve: {
validate: function($q, $sails, $location) {
var defer = $q.defer();
$sails.get("/user/getCurrentUser")
.success(function(response) {
if (response.user.accessAdminPage) {
defer.resolve();
} else {
defer.reject("Access blocked");
$location.path('/');
}
});
return defer.promise;
}
}
});
Hopefully this could help you, Thanks.

With the solution given by pankajparkar, the issue is that you will have to reply the logic in each state declaration. I recommend you to check the user's authorization in the onStateChangeStart event
angular.module('myApp', ['ui.router'])
.run(function($rootScope, AuthService){
$rootScope.$on('$stateChangeStart',
function(event, next, nextParams, prev, prevParams) {
AuthService.isNotAutorized()
.then(function() {
event.preventDefault();
$state.go('defaultState');
});
});
});

Open Modal and change URL without change the view in AngularJS

I'm trying to open a modal with angularjs.
My route to task list is:
/client/:id/task/list
Its working fine.
Now, i'm trying to show the task info in a modal, above the list.
My route for this is:
/client/:id/task/:id
How can i open the modal above the list view, change the URL, but don't change the view?
I saw a lot of topics about this, but with none solution.
Thanks.

You can specify states you want to show as modal and when handled, return to state you want to. For example;
app.config(function ($stateProvider) {
$stateProvider.state('tasks', {
url: '/tasks',
templateUrl: 'tasks.html',
controller: 'TasksCtrl'
}).state("tasks.show", {
url: "/tasks/:id",
onEnter: function($stateParams, $state, $modal) {
$modal.open({
templateUrl: "show.html",
resolve: {},
controller: function($scope, $state) {
$scope.ok = function () {
$scope.$close();
};
$scope.dismiss = function () {
$scope.$dismiss();
};
}
}).result.then(function (result) {
// $scope.$close
}, function (result) {
// $scope.$dismiss
}).finally(function () {
// finally
return $state.transitionTo("tasks");
});
}
});
});
Related plunker here http://plnkr.co/edit/fCyrlH

Angular UI Router replace view on runtime

I'm trying to change a parent view template on runtime - inside a service.
My app config looks like:
$stateProvider
.state('base', {
abstract: true,
views: {
'header': {
controller: 'HeaderCtrl',
templateUrl: 'header.html'
},
'': {
template: '<div ui-view="main"></div>'
}
}
})
.state('base.home', {
url: '/',
views: {
'main': {
controller: 'SomeContentCtrl',
templateUrl: 'content.html'
}
}
});
I then have a service which is called from SomeContentCtrl that will listen for an event and upon such event I want to set the templateUrl for the header to null. Something like:
angular
.module('RemoveTemplate', [ ])
.factory('RemoveTemplate', ['$window', '$view', '$state',
function RemoveTemplate ( $window, $view, $state ) {
var windowElem = angular.element($window);
var listen = function ( ) {
windowElem.on('RemoveTemplate', function ( event ) {
$view.load('header#base', {
templateUrl: null
});
// Trying both, even tried without refreshing the state
$state.reload();
$state.go('wh.lobby');
});
};
return {
listen: listen
};
}
]);
});
But this isn't working at all. Have anyone came across a similar use case before?
Thanks

You can specify a templateURL function that runs each time you navigate to the state.
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#template-templateurl-templateprovider
this method can check if it should supply a url or something else;
example:
$stateProvider.state('home', {
url: '/',
templateUrl: function () {
if (header === true) {
return 'app/templates/home.html';
} else {
return somethingElse;
}
}
})

If you want to 'hide' the header section without removing the html try to use a ng-show directive inside the header tag and check the actual state.
<div ng-show="state.is('base')">
This way you only need to inject the $state service in the controller.
When the state is base the div will show, if you navigate to child states it will hide.
p.s. $state.is returns a boolean, this method works with ng-if as well.