iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(angular_1_router): ng-link is generating wrong hrefs 

At the moment ng-link is generating html5mode URLs for `href`s.
Instead it should check whether or not html5mode is enabled and create
the `href`s accordingly. The renaming in the `getLink` function is
aligning it to `RouterLink`'s `_updateLink`.

Closes #7423
This commit is contained in:
David Reher 2016-03-04 09:14:27 +01:00 committed by Pete Bacon Darwin
parent 980491b08f
commit 69c1405196
3 changed files with 103 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/angular1_router/lib/facades.es5
View File

@ -316,3 +316,13 @@ Location.prototype.path = function () {
Location.prototype.go = function (path, query) {
return $location.url(path + query);
};
Location.prototype.prepareExternalUrl = function(url) {
if (url.length > 0 && !url.startsWith('/')) {
url = '/' + url;
}
if(!$location.$$html5) {
return '#' + url;
} else {
return '.' + url;
}
};

13
modules/angular1_router/src/ng_outlet.ts
View File

@ -207,13 +207,13 @@ function ngLinkDirective($rootRouter, $parse) {
return;
}
let instruction = null;
let navigationInstruction = null;
let link = attrs.ngLink || '';
function getLink(params) {
instruction = router.generate(params);
navigationInstruction = router.generate(params);
scope.$watch(function() { return router.isRouteActive(instruction); },
scope.$watch(function() { return router.isRouteActive(navigationInstruction); },
function(active) {
if (active) {
element.addClass('ng-link-active');
@ -222,7 +222,8 @@ function ngLinkDirective($rootRouter, $parse) {
}
});
return './' + angular.stringifyInstruction(instruction);
const navigationHref = navigationInstruction.toLinkUrl();
return $rootRouter._location.prepareExternalUrl(navigationHref);
}
let routeParamsGetter = $parse(link);
@ -236,11 +237,11 @@ function ngLinkDirective($rootRouter, $parse) {
}
element.on('click', event => {
if (event.which !== 1 || !instruction) {
if (event.which !== 1 || !navigationInstruction) {
return;
}
$rootRouter.navigateByInstruction(instruction);
$rootRouter.navigateByInstruction(navigationInstruction);
event.preventDefault();
});
}

182
modules/angular1_router/test/ng_link_spec.js vendored
View File

@ -2,183 +2,173 @@
describe('ngLink', function () {
var elt,
$compile,
$rootScope,
$rootRouter,
$compileProvider;
beforeEach(function () {
module('ng');
module('ngComponentRouter');
module(function (_$compileProvider_) {
$compileProvider = _$compileProvider_;
});
inject(function (_$compile_, _$rootScope_, _$rootRouter_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootRouter = _$rootRouter_;
});
registerComponent('userCmp', '<div>hello {{userCmp.$routeParams.name}}</div>', function () {});
registerComponent('oneCmp', '<div>{{oneCmp.number}}</div>', function () {this.number = 'one'});
registerComponent('twoCmp', '<div><a ng-link="[\'/Two\']">{{twoCmp.number}}</a></div>', function () {this.number = 'two'});
});
it('should allow linking from the parent to the child', function () {
$rootRouter.config([
setup();
configureRouter([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
var elt = compile('<a ng-link="[\'/Two\']">link</a> | outer { <div ng-outlet></div> }');
navigateTo('/a');
expect(elt.find('a').attr('href')).toBe('./b');
});
it('should allow linking from the child and the parent', function () {
$rootRouter.config([
setup();
configureRouter([
{ path: '/a', component: 'oneCmp' },
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
compile('outer { <div ng-outlet></div> }');
$rootRouter.navigateByUrl('/b');
$rootScope.$digest();
var elt = compile('outer { <div ng-outlet></div> }');
navigateTo('/b');
expect(elt.find('a').attr('href')).toBe('./b');
});
it('should allow params in routerLink directive', function () {
setup();
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: \'lol\'}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'two'});
$rootRouter.config([
configureRouter([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
var elt = compile('<div ng-outlet></div>');
navigateTo('/a');
expect(elt.find('a').attr('href')).toBe('./b/lol');
});
it('should update the href of links with bound params', function () {
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: twoLinkCmp.number}]">{{twoLinkCmp.number}}</a></div>', function () {this.number = 'param'});
$rootRouter.config([
setup();
registerComponent('twoLinkCmp', '<div><a ng-link="[\'/Two\', {param: $ctrl.number}]">{{$ctrl.number}}</a></div>', function () {this.number = 43});
configureRouter([
{ path: '/a', component: 'twoLinkCmp' },
{ path: '/b/:param', component: 'twoCmp', name: 'Two' }
]);
compile('<div ng-outlet></div>');
$rootRouter.navigateByUrl('/a');
$rootScope.$digest();
expect(elt.find('a').attr('href')).toBe('./b/param');
var elt = compile('<div ng-outlet></div>');
navigateTo('/a');
expect(elt.find('a').text()).toBe('43');
expect(elt.find('a').attr('href')).toBe('./b/43');
});
it('should navigate on left-mouse click when a link url matches a route', function () {
$rootRouter.config([
setup();
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
$rootScope.$digest();
var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
expect(elt.text()).toBe('link | one');
expect(elt.find('a').attr('href')).toBe('./two');
elt.find('a')[0].click();
$rootScope.$digest();
inject(function($rootScope) { $rootScope.$digest(); });
expect(elt.text()).toBe('link | two');
});
it('should not navigate on non-left mouse click when a link url matches a route', inject(function ($rootRouter) {
$rootRouter.config([
it('should not navigate on non-left mouse click when a link url matches a route', function() {
setup();
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
$rootScope.$digest();
var elt = compile('<a ng-link="[\'/Two\']">link</a> | <div ng-outlet></div>');
expect(elt.text()).toBe('link | one');
elt.find('a').triggerHandler({ type: 'click', which: 3 });
$rootScope.$digest();
inject(function($rootScope) { $rootScope.$digest(); });
expect(elt.text()).toBe('link | one');
}));
});
// See https://github.com/angular/router/issues/206
it('should not navigate a link without an href', function () {
$rootRouter.config([
setup();
configureRouter([
{ path: '/', component: 'oneCmp' },
{ path: '/two', component: 'twoCmp', name: 'Two'}
]);
expect(function () {
compile('<a>link</a>');
$rootScope.$digest();
var elt = compile('<a>link</a>');
expect(elt.text()).toBe('link');
elt.find('a')[0].click();
$rootScope.$digest();
inject(function($rootScope) { $rootScope.$digest(); });
}).not.toThrow();
});
it('should add an ng-link-active class on the current link', inject(function ($rootRouter) {
$rootRouter.config([
it('should add an ng-link-active class on the current link', function() {
setup();
configureRouter([
{ path: '/', component: 'oneCmp', name: 'One' }
]);
compile('<a ng-link="[\'/One\']">one</a> | <div ng-outlet></div>');
$rootScope.$digest();
$rootRouter.navigateByUrl('/');
$rootScope.$digest();
var elt = compile('<a ng-link="[\'/One\']">one</a> | <div ng-outlet></div>');
navigateTo('/');
expect(elt.find('a').attr('class')).toBe('ng-link-active');
}));
});
function registerComponent(name, template, config) {
var controller = function () {};
describe('html5Mode disabled', function () {
it('should prepend href with a hash', function () {
setup({ html5Mode: false });
module(function($locationProvider) {
$locationProvider.html5Mode(false);
});
configureRouter([
{ path: '/b', component: 'twoCmp', name: 'Two' }
]);
var elt = compile('<a ng-link="[\'/Two\']">link</a>');
expect(elt.find('a').attr('href')).toBe('#/b');
});
});
function factory() {
return {
function registerComponent(name, template, controller) {
module(function($compileProvider) {
$compileProvider.component(name, {
template: template,
controllerAs: name,
controller: controller
};
}
});
});
}
if (!template) {
template = '';
}
if (angular.isArray(config)) {
factory.annotations = [new angular.annotations.RouteConfig(config)];
} else if (typeof config === 'function') {
controller = config;
} else if (typeof config === 'object') {
if (config.canActivate) {
controller.$canActivate = config.canActivate;
}
}
$compileProvider.directive(name, factory);
function setup(config) {
var html5Mode = !(config && config.html5Mode === false);
module('ngComponentRouter')
module(function($locationProvider) {
$locationProvider.html5Mode(html5Mode);
});
registerComponent('userCmp', '<div>hello {{$ctrl.$routeParams.name}}</div>', function () {});
registerComponent('oneCmp', '<div>{{$ctrl.number}}</div>', function () {this.number = 'one'});
registerComponent('twoCmp', '<div><a ng-link="[\'/Two\']">{{$ctrl.number}}</a></div>', function () {this.number = 'two'});
}
function configureRouter(routeConfig) {
inject(function($rootRouter) {
$rootRouter.config(routeConfig);
});
}
function compile(template) {
elt = $compile('<div>' + template + '</div>')($rootScope);
$rootScope.$digest();
var elt;
inject(function($compile, $rootScope) {
elt = $compile('<div>' + template + '</div>')($rootScope);
$rootScope.$digest();
});
return elt;
}
function navigateTo(url) {
inject(function($rootRouter, $rootScope) {
$rootRouter.navigateByUrl(url);
$rootScope.$digest();
});
}
});