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 the tag, the path that appears after clicking is not #/, but #!#. However I did not set hashPrefix.

<a href="#about" class="ng-binding">About</a>

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 two solutions provided below:

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

$locationProvider.hashPrefix('');

2. Change the format of href

<a href="#!about" class="ng-binding">About</a>

Another thing to note is that once ngRoute is introduced, the tag 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 like cannot 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

<a goto="#about" href="#about" class="ng-binding">About</a>

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!