Angularjs - Reload page even if same url - javascript

I'm using Angularjs 1.3, my project has 2 submenus:
href="/submenu"
href="/submenu?page=1"
When I am on submenu page and clicks on second url, the page is not reloading, it simply update the url, but does nothing. I have written the code when user lands on second url with that query parameter.
I don't want to force reload the page with
window.location.reload();, because it will empty the $rootscope.
I have one solution, by redefining url code with Angular ui-router but it is time consuming since redefining will break the major features. I am looking for quick fix right now.

Maybe this works:
...
Check if $rootscope is empty, to make it sure.

I quick fixed it. There was a guy who commented but, removed it now. He said I should call the function with data to update the view, instead of redirecting, and I did that.
But in my case, menu is out of that page's controller scope, I used vanilla js for the link redirection (need to perform some action before redirecting).
So in order to call the controller's function, I checked if I am on the same page, if yes, then grab the angular scope from the page, in order to get all the functions defined in that controller, using:
angular.element($('#someId')).scope();
SomeID should be set on the element on which ng-controller is defined. It gave me all the functions defined in that controller's scope. Then I just called the function and page gets updated, without reloading, problem solved.

Use target="_self":
href="/submenu" target="_self"
href="/submenu?page=1" target="_self"

Related

AngularJS - Opening links in a new window using ng-click

First off, I'm not sure if the title I came up accurately describes what I'm trying to do.
I have a table of tasks, with an assign action for each. Basically, in normal cases, the user would click the link, in which a call would be made to assign them to the task and then redirect them to the task details page. That can be done with a simple ng-click to call the assign function, and then using the $location.path() function for the redirect on success. Doing it this way, there is no need for the href attribute.
But, this also takes away the ability to open the link in a new tab by "middle clicking" or "ctrl + clicking" because there's no href value. For example, some users would typically assign themselves to multiple tasks at a time. On a typical site, it would just be a regular link that does some processing, finishes, and then loads the page they were intending to go to. So they could get away with opening multiple tabs, because all of them would process the request and then return the page as the response.
So I've added an ng-href attribute since I have an ID in there, and it kind of works. Middle clicking (or ctrl + clicking) will still call the ng-click function, and the ng-href will let the new tab open. But now the issue I have is that since the assign function call is async, sometimes the tab will load up not showing that they're assigned, since the page loaded before the assignment was processed.
Does anyone have an idea of what I can do to make this more reliable and accurate?
Can you not just use
$window.open(LOCATION);
instead of $location.path() ?

Iron Router hook on a route before actually changing the template

i am trying to show the user a payment popup as soon as he clicks on a payed object.
But after he pays he should directly enter the content he clicked on.
Therefore i think its a good solution to solve this with the router, because i want every link on the page that redirects to this content to show this popup.
My problem is i want to show the popup before redirecting the user.
So i tryed the onBeforeAction hook and stuff but everything working with the iron router seems to only hook in after the URL of the browser changed and the current template was unloaded.
Do you have an idea how to get this kind of behavior?
Cheers
Based on this answer, here is how you can hook the router using Router.onStop():
// onStop hook is executed whenever we LEAVE a route
Router.onStop(function(){
//check if the current route is the page from where you need to show your
//popup and show it based on, for instance, a session variable containing
//the previously clicked content id.
});
It's a common use case that I don't think is directly achievable within the iron router framework at present (although I would be delighted to be corrected!). As you've discovered, onBeforeAction is run before the page has rendered but after the new route has been run, so the old page has already disappeared.
Effectively, you're looking to queue the running of a new route until a certain action has been completed. The use case for which I've experienced this requirement is page transitions, for which the best solution appears to be to do completely the opposite of what you propose: i.e. to add the logic to an event attached to the link, and only redirect to the new route once that logic has been satisfactorily completed (i.e. the popup has been closed in your case).
I agree that doing something in the router would be a sensible way to approach this, but I'm not sure it's possible in iron router as things stand. Note that this has already been raised though!
Will this workshop?
'unload - runs just once when you leave the route for a new route.'
From
https://github.com/EventedMind/iron-router/blob/devel/DOCS.md#unload-hook

AngularJS - ng-click in shell page

I have an Angular JS app in which the header and footer are part of index.html, and the views are loaded dynamically between. I have a signOut() function on the scope in my controllers that makes the proper calls to a REST API to sign out the user. However, the "Sign Out" button is a part of the header, so I'm having trouble getting it to call the signOut() function.
ng-click="signOut()" inside the <button> tag does absolutely nothing, presumably because the button is in the shell page, not one of the views, and so doesn't have access to the scope.
Alternatively to using ng-click, I tried putting some code in my view to call the signOut() function when the button is clicked, since I know I can access it through the DOM. I first tried this:
<script>
$('#logoutbutton').on('click', function(){
{{signOut()}};
console.log("signout clicked");
});
</script>
But that throws Uncaught ReferenceError: signOut is not defined because the scope apparently isn't accessible within the <script></script> tags. For that same reason, I suspect
<script>
$('#logoutbutton').on('click',
{{signOut()}}
);
</script>
would not work, even though trying to use that code throws a syntax error (Unexpected token '{').
I'm trying to find out if there's any way I can call the signOut() function when the logout button is clicked without needing to make the button a part of the view instead of the shell page.
For the curious, I control whether the button is visible by setting display:none by default, and putting this line at the top of all the views where I want it to be displayed:
<script>
document.getElementById('logoutbutton').style.display = 'block';
</script>
which is how I know I can access the button through the DOM, even inside the views.
This worked for me.
<button id="btn">click</button>
$scope.show = function(){alert('msg');}
$('#btn').on('click',$scope.show);
I have to agree with Mostafa Talebi the accepted answer is using a completely different framework and isn't an AngularJS based answer. In fact the only problem I can see with your plunkr is that the main div is missing the ng-controller directive which would need to point at your sign out controller. You would then be able to hook up an ng-click on your button to your sign out function in the regular way. This is essentially what glendaviesnz is suggesting. You wouldn't then need to do the javascript get element and event listening which really isn't the Angular way.
Further to this the use of jquery events in an angular app should be avoided because effectively they happen outside the view of angular or more precisely outside of the angular digest cycle. You can use the $on to list for events in Angular and $broadcast/$emit to broadcast events.
Your requirement is a basic spa with authentication and there are any number of good examples of this Dan Wahlin's CustomerManager springs to mind which demonstrates how to achieve what you want in a purely Angular way.

dojo/subscribe does not work if the document is not ready

I have a small requirement. We have a application controller and a custom dijit which work together with each other.
I want to publish a event from the dijit and subscribe the same in controller. But the problem is the controller is not loaded first time when publish event is triggered, so the subscribe is not working first time.
Once the controller is loaded, if we publish again, then subscribe works perfectly fine.
Is there any solution to this problem ?
Have you tried dojo/ready to make sure, all necessary Parts are loaded? Check your loading hierarchy. Is it possible to load the controller in the init-phase at the start?
Regard
Thanks for your answers Dimitri and Ken Franqueiro & MiBrock. Dimitri's solution sound useful to me. The controller and the Widget which publish the event are not on same page also the controlller is not always loaded whereas the Widget is part of my Menu so its present on every page.
What I tried is used Memory to pass the data and first time called the function where the event and data will be used. So my widget sets data in Memory store and in controller, once its loaded we retrieve the value and use it. So this happens only first time, from second time onwards my published calls are working as Controller is loaded on page.

Angular JS fires ng-click before loading the resource at href

I have a link/anchor HTML like:
<a href='/some-form' ng-click='someFunction(item)'>Text</a>
What I have in mind is that user clicks this link, then I want to load an HTML from server, and after the loading of that HTML, I want someFunction to be executed, which fills the loaded form with some data.
However, by debugging my code, it seems that Angular JS first fires someFunction function, and then browser loads the HTML. Not only I want this to be reverse, but also I need them to be executed sequentially (synchronously).
Is my design a good design? Is there any other way to achieve this behavior? If not, what should I do to make it work?
so I think someFunction(item) should be in the other controller dealing with the route /some-form.
You may also consider using $location to manually navigate to /some-form.

Categories

Resources