Let's talk about how to solve the #!# problem in ngRoute path?

This article will introduce to you the #!# solution when the ngRoute path appears. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related recommendations: "angularjs tutorial"

When I was working on an open source project, I used "angular-route": "^1.6.4", I found that after setting the href of thetag, the path that appears after clicking is not #/, but #!#. However I did not set hashPrefix.

About

After clicking the label, the address bar will appear: http://localhost:9000/#!#about.

Print $location.

We found that the $location we set was not displayed in the path part of the pseudo URL as expected, but ran to the hash part.

The reason is: when the route version is >1.6.0, the default hashPrefix is modified to ‘!’.

Equivalent to the following code

$locationProvider.hashPrefix('!');

There are twosolutions provided below:

1. Restore hashPrefix to the version before 1.6 That way.

$locationProvider.hashPrefix('');

2. Change the format of href

About

Another thing to note is that once ngRoute is introduced, thetag will seem to have the default behavior overridden by ngRoute. , once the href starts with #, it will add a / to the hash part of the URL instead of appending the string directly to #, so something likecannot jump to the id ="about" tag. I did some research and found that I can write an instruction and then call window.location.hash to solve this problem.

html

About

js

define(['app'], function (app) { app.directive('goto', function () { return function ($scope, $elem, $attrs) { $elem.click(function () { //console.log($attrs.goto.substring(1)); window.location.hash = $attrs.goto.substring(1); }); }; }); });

Note: The above define is requireJS to define a module.

For more programming-related knowledge, please visit:Programming Teaching! !

The above is the detailed content of Let's talk about how to solve the #!# problem in ngRoute path?. For more information, please follow other related articles on the PHP Chinese website!