in currently using angular-ui-router in my angularjs app. With main routes triggered from ui-sref directive in the top nav. How can I refresh a route even if I'm clicking on the current route.
Also if I'm in a subroute, then I want to refresh the view with the main route view.
Do I move this navigation into a custom function called upon ng-click?
So what I did was to create function within my controller:
$scope.navigateTo = function(stateName){
if($state.current.name == stateName){
$state.go($state.$current, null, { reload: true });
}else{
$state.go(stateName, {inherit:false});
}
}
this was then called from within my html via my ng-click directive:
ng-click="navigateTo('appname.resources')"
Related
I have a single page angularjs app. I use $routeProvider to load up custom directives shown in the code below.
Now each custom directive loaded is made up of additional sub custom directives. All the custom directives have isolated scopes.
What I need is when the view changes is the scope to be destroyed as well as remove the directives from the DOM under the current view. I've got as far as the following code. Can this be achieved with Jquery lite and/or angularjs only? If so how do I remove the parent and child directives from the DOM for a particular view? Thanks in advance.
Custom Directive Form
angular.module("form", [])
.directive("form",['$http','$rootScope','$location', function($http,$rootScope,$location){
return{
link: function(scope,element,attrs){
//functions go heere
//destroy scope and remove from DOM on route change
$rootScope.$on( "$routeChangeSuccess", function(event, next, current) {
if($location.path()!=='/form'){
scope.$destroy();
console.log('This should not be displayed on route change');
}
});
//function and scopes go here
},//return
restrict:"A",
replace:true,
templateUrl:"partials/form/form.html",//template
transclude:true, //incorporate additional data within
scope:{}
}//return
}])
ng-view/routeProvider
app.config(['$routeProvider',function($routeProvider) {
//configure the routes
$routeProvider
.when('/',{
// route for the home page
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
})
.when('/home',{
// route for the home page
templateUrl:'partials/home/home.html',
template:'<div home></div>'
})
.when('/company',{
// route for the sites& companies
template:'<div company></div>'
})
.when('/form',{
// route for form
template:'<div form></div>'
})
.otherwise({
//when all else fails
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
});
}]);
Please see this reference:
How to manually take an Angular directive out of the DOM
As per the source reference :
Steps:
1. Delete the directive's scope
2. Delete the directive's DOM
childScope.$destroy(); //IF THE DIRECTIVE WAS CREATED DYNAMICALLY OR ELSE WE MAY USE angular.element(DIRECTIVES-DOM).scope().$destroy()
$('.my-directive-placeholder').empty(); //DELETE DIRECTIVE'S DOM
I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker
Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.
<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login
Thanks
On your parent state add a param
.state('parentState', {
//...
params: {
autoActivateChild: 'parentState.childState'
}
//...
})
And add this somewhere
$rootScope.$on('$stateChangeSuccess', function(event, toState){
var aac;
if(aac = toState && toState.params && toState.params.autoActivateChild){
$state.go(aac);
}
});
If you wanted to navigate automatically to a default child state when the parent loads, you could trigger a click on that particular ui-sref in your controller.
angular.element("#childElementId").trigger('click');
I don't know why (sure?) ng-view doesn't reload datas changed from controller. The code is like this:
$scope.reloadUserInfo = function() {
APIs.tot_of(null).then(function(result) {
$scope.tot_of = result;
APIs.info_of(null).then(function(result) {
$scope.info_of = result;
});
});
};
$scope.info_of is reloaded in all view but not in ng-view like this.
<div id="page-content">
info_of or other params are reloaded
<div ng-view>Here, using routes, info_of or other params aren't reloaded.</div>
</div>
I created a function that reload info at every refresh or change route, so if I change route the ng-view data reload but if I use ng-click, data doesn't reload in ng-view. Who know why? Thanks.
Update with plnkr:
http://plnkr.co/edit/R5fCJykwbm2q18Px4BrZ?p=preview
This happens because your ng-view directive creates a child scope. If you remove the controller in your route, or in your view display {{$parent.name}} then it will work.
I've got ngClick directives on the anchors tags inside my main navigation, to make the menu "disappear" off canvas after clicking it:
<a href="/#/profile" ng-click="showNav = false">
It's functioning all right. However, I recently noticed an error (in the console) that occurs when I'm changing view through those anchor tags:
Infinite $digest
Loop error in component $rootScope
This is how I handles my routes:
$routeProvider.when('/register', {
templateUrl: 'assets/templates/register.html',
controller: 'RegistrationController'
});
Is this because I change view at the same time as I'm setting "showNav" to false? Is this even the right way to go with this?
If you just want menu to disappear - you stay href empty. If you need moving to new controller then set showNav = false in profile controller. So I mean you need something one - either ng-click or href, not both.
tie the showing and hiding of your anchor tag to the url not the user clicking i.e.:
<a ng-if="location.path() != '/profile' href="/#/profile"></a>
in your controller:
function mycontroller($scope,$location) {
$scope.location = $location;
}
I'm using the following to do paging in my datagrid:
$location.search('page', page);
where page is the current page number.
Then I listen to the following event:
$scope.$on('$routeUpdate', function(next, current) {
$scope.currentPage = $routeParams.page ? Number($routeParams.page) : 1;
$scope.search();
});
That triggers a call to a search() method on my scope after updating the currentPage that is in the URL.
How would I translate that to states with ui-router ? The $routeUpdate is no longer triggered since I'm using a state manager instead of routes.
My route is now defined in the state provider as such:
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
})
I ended up listening to the $locationChangeSuccess event instead and that solved it.
I would try to use the controller (mandatsCtrl in your example) to put that logic. the view controller will be called with every parameter change, and you could inject the $stateParams into it to get the page #
other similar option to explore is the view controllers which is what I've used at some point
last, since $stateParams is injectable, you might want to inject it to your custom-built directive and use it there straight