From 0f22dce036bd5cb3242edafb119256a6433dd4f4 Mon Sep 17 00:00:00 2001 From: Peter Bacon Darwin Date: Sun, 7 Feb 2016 20:40:00 +0000 Subject: [PATCH] feat(angular1_router): allow component to bind to router --- modules/angular1_router/src/ng_outlet.ts | 3 +- .../test/integration/router_spec.js | 80 +++++++++++++++---- 2 files changed, 66 insertions(+), 17 deletions(-) diff --git a/modules/angular1_router/src/ng_outlet.ts b/modules/angular1_router/src/ng_outlet.ts index 7c450bb40d..62bfe20635 100644 --- a/modules/angular1_router/src/ng_outlet.ts +++ b/modules/angular1_router/src/ng_outlet.ts @@ -156,10 +156,11 @@ function ngOutletDirective($animate, $q: ng.IQService, $router) { this.controller.$$routeParams = instruction.params; this.controller.$$template = - '<' + dashCase(componentName) + '>'; + '<' + dashCase(componentName) + ' router="$$router">'; this.controller.$$router = this.router.childRouter(instruction.componentType); let newScope = scope.$new(); + newScope.$$router = this.controller.$$router; let clone = $transclude(newScope, clone => { $animate.enter(clone, null, this.currentElement || element); diff --git a/modules/angular1_router/test/integration/router_spec.js b/modules/angular1_router/test/integration/router_spec.js index c302c21cea..bea802f366 100644 --- a/modules/angular1_router/test/integration/router_spec.js +++ b/modules/angular1_router/test/integration/router_spec.js @@ -44,36 +44,84 @@ describe('router', function () { expect(elt.text()).toBe('Home'); })); - function registerComponent(name, options) { - var controller = options.controller || function () {}; - ['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) { - if (options[hookName]) { - controller.prototype[hookName] = options[hookName]; - } + it('should bind the component to the current router', inject(function($location) { + var router; + registerComponent('homeCmp', { + bindings: { router: '=' }, + controller: function($scope, $element) { + this.$routerOnActivate = function() { + router = this.router; + }; + }, + template: 'Home' }); + registerComponent('app', { + template: '
', + $routeConfig: [ + { path: '/', component: 'homeCmp' } + ] + }); + + compile(''); + + $location.path('/'); + $rootScope.$digest(); + var homeElement = elt.find('home-cmp'); + expect(homeElement.text()).toBe('Home'); + expect(homeElement.isolateScope().$ctrl.router).toBeDefined(); + expect(router).toBeDefined(); + })); + + function registerDirective(name, options) { function factory() { return { template: options.template || '', controllerAs: name, - controller: controller + controller: getController(options) }; } - - if (options.$canActivate) { - factory.$canActivate = options.$canActivate; - } - if (options.$routeConfig) { - factory.$routeConfig = options.$routeConfig; - } - + applyStaticProperties(factory, options); $compileProvider.directive(name, factory); } + function registerComponent(name, options) { + + var definition = { + bindings: options.bindings, + template: options.template || '', + controller: getController(options), + } + applyStaticProperties(definition, options); + $compileProvider.component(name, definition); + } + function compile(template) { elt = $compile('
' + template + '
')($rootScope); $rootScope.$digest(); return elt; } -}); + + function getController(options) { + var controller = options.controller || function () {}; + [ + '$routerOnActivate', '$routerOnDeactivate', + '$routerOnReuse', '$routerCanReuse', + '$routerCanDeactivate' + ].forEach(function (hookName) { + if (options[hookName]) { + controller.prototype[hookName] = options[hookName]; + } + }); + return controller; + } + + function applyStaticProperties(target, options) { + ['$canActivate', '$routeConfig'].forEach(function(property) { + if (options[property]) { + target[property] = options[property]; + } + }); + } +}); \ No newline at end of file