Make link-to directive more flexible

This commit is contained in:
Joe Fiorini
2015-05-13 13:09:22 -04:00
parent 16cc712b9e
commit cfdc4e49ba
2 changed files with 17 additions and 11 deletions

View File

@@ -1,3 +1,5 @@
/* jshint unused: vars */
import {lookupRouteUrl} from './lookup-route-url'; import {lookupRouteUrl} from './lookup-route-url';
/** /**
@@ -37,9 +39,9 @@ import {lookupRouteUrl} from './lookup-route-url';
title: 'Featured', title: 'Featured',
body: 'This post is featured because it is awesome' body: 'This post is featured because it is awesome'
};"> };">
<link-to route="post" model="{ id: featuredPost }"> <a link-to="post" model="{ id: featuredPost }">
{{featuredPost.title}} {{featuredPost.title}}
</link-to> </a>
</section> </section>
</file> </file>
</example> </example>
@@ -47,20 +49,19 @@ import {lookupRouteUrl} from './lookup-route-url';
*/ */
export default export default
[ '$route', [ '$route',
'$location',
'transitionTo', 'transitionTo',
function($routeProvider, transitionTo) { function($routeProvider, $location, transitionTo) {
return { return {
restrict: 'E', restrict: 'A',
transclude: true,
template: '<a href="{{url}}" data-transition-to title="{{routeName}}" ng-transclude></a>',
scope: { scope: {
routeName: '@route', routeName: '@linkTo',
model: '&' model: '&'
}, },
link: function(scope, element) { link: function (scope, element, attrs) {
var model = scope.$eval(scope.model); var model = scope.$eval(scope.model);
scope.url = lookupRouteUrl(scope.routeName, $routeProvider.routes, model); scope.url = lookupRouteUrl(scope.routeName, $routeProvider.routes, model, $location.$$html5);
element.find('[data-transition-to]').on('click', function(e) { element.find('[data-transition-to]').on('click', function(e) {
e.stopPropagation(); e.stopPropagation();
@@ -68,6 +69,7 @@ export default
transitionTo(scope.routeName, model); transitionTo(scope.routeName, model);
}); });
element.attr('href', scope.url);
} }
}; };
} }

View File

@@ -1,4 +1,4 @@
export function lookupRouteUrl(name, routes, models) { export function lookupRouteUrl(name, routes, models, html5Mode) {
var route = _.find(routes, {name: name}); var route = _.find(routes, {name: name});
if (angular.isUndefined(route)) { if (angular.isUndefined(route)) {
@@ -39,5 +39,9 @@ export function lookupRouteUrl(name, routes, models) {
} }
if (!html5Mode) {
routeUrl = '#' + routeUrl;
}
return routeUrl; return routeUrl;
} }