Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

ngComponentRouter not calling $routerOnActivate in angular 1.5 when using a template URL #13860

Closed
ericj79 opened this issue Jan 27, 2016 · 4 comments
Assignees
Milestone

Comments

@ericj79
Copy link

ericj79 commented Jan 27, 2016

I know it is not released yet, but I am testing out the new router with Angular 1.5 RC1. The router file I am using is pulled from Here: https://github.com/brandonroberts/angularjs-component-router/blob/master/lib/angular_1_router.js

The $routerONActivate hook is never called if my router directive uses a templateUrl. When I switch it to just be a template (using an ng-include pointing to the url) it gets called as expected.

@Narretz Narretz added this to the 1.5.x - migration-facilitation milestone Jan 27, 2016
@Narretz
Copy link
Contributor

Narretz commented Jan 27, 2016

@petebacondarwin could you take a look at this?

@petebacondarwin
Copy link
Member

I will add it to my list of router related tasks for this week and next

@petebacondarwin
Copy link
Member

We should cross post this to angular/angular since that is where the code is and also where other issues with ng1 component router are being managed

petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Jan 31, 2016
In Angular 1.5 there is a new helper method for creating component directives.
See https://docs.angularjs.org/guide/component for more information about components.

These kind of directives only match the `E` element form and the previously component
router only created HTML that matched directives that matched the `A` attribute form.

This commit changes the `<ng-outlet>` directive so that it generates custom HTML
elements rather divs with custom attributes to trigger the relevant component to
appear in the DOM.

Going forward, Angular 1.5 users are encouraged to create their router components
using the following style:

```
myModule.componnet('component-name', {
  // component definition object
});
```

Closes angular/angular.js#13860
Closes angular#5278

BREAKING CHANGE:

The component router now creates custom element HTML rather than custom attribute
HTML, in order to create a new component. So rather than

```html
<div custom-component></div>
```

it now creates

```html
<custom-component></custom-component>
```

If you defined you router components using the `directive()` helper and
specified the `restrict` properties such that element matching was not allowed,
e.g. `restrict: 'A'` then these components will no longer be instantiated
by the component router and the outlet will be empty.

The fix is to include `E` in the `restrict` property.

`restrict: 'EA'`

Note that this does not affect directives that did not specify the `restrict`
property as the default for this property is already `EA`.
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Jan 31, 2016
In Angular 1.5 there is a new helper method for creating component directives.
See https://docs.angularjs.org/guide/component for more information about components.

These kind of directives only match the `E` element form and the previously component
router only created HTML that matched directives that matched the `A` attribute form.

This commit changes the `<ng-outlet>` directive so that it generates custom HTML
elements rather divs with custom attributes to trigger the relevant component to
appear in the DOM.

Going forward, Angular 1.5 users are encouraged to create their router components
using the following style:

```
myModule.componnet('component-name', {
  // component definition object
});
```

Closes angular/angular.js#13860
Closes angular#6076
Closes angular#5278

BREAKING CHANGE:

The component router now creates custom element HTML rather than custom attribute
HTML, in order to create a new component. So rather than

```html
<div custom-component></div>
```

it now creates

```html
<custom-component></custom-component>
```

If you defined you router components using the `directive()` helper and
specified the `restrict` properties such that element matching was not allowed,
e.g. `restrict: 'A'` then these components will no longer be instantiated
by the component router and the outlet will be empty.

The fix is to include `E` in the `restrict` property.

`restrict: 'EA'`

Note that this does not affect directives that did not specify the `restrict`
property as the default for this property is already `EA`.
@vguede
Copy link

vguede commented Feb 4, 2016

@petebacondarwin Yes, duplicate of angular/angular#4633

petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Feb 8, 2016
In Angular 1.5 there is a new helper method for creating component directives.
See https://docs.angularjs.org/guide/component for more information about components.

These kind of directives only match the `E` element form and the previously component
router only created HTML that matched directives that matched the `A` attribute form.

This commit changes the `<ng-outlet>` directive so that it generates custom HTML
elements rather divs with custom attributes to trigger the relevant component to
appear in the DOM.

Going forward, Angular 1.5 users are encouraged to create their router components
using the following style:

```
myModule.componnet('component-name', {
  // component definition object
});
```

Closes angular/angular.js#13860
Closes angular#6076
Closes angular#5278

BREAKING CHANGE:

The component router now creates custom element HTML rather than custom attribute
HTML, in order to create a new component. So rather than

```html
<div custom-component></div>
```

it now creates

```html
<custom-component></custom-component>
```

If you defined you router components using the `directive()` helper and
specified the `restrict` properties such that element matching was not allowed,
e.g. `restrict: 'A'` then these components will no longer be instantiated
by the component router and the outlet will be empty.

The fix is to include `E` in the `restrict` property.

`restrict: 'EA'`

Note that this does not affect directives that did not specify the `restrict`
property as the default for this property is already `EA`.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants