This repository was archived by the owner on Apr 12, 2024. It is now read-only.
Implement lifecycle hooks for directive/component controllers (ng2-style) #14030
Closed
5 of 9 tasks
Milestone
Comments
This was referenced Mar 5, 2016
|
Why is |
|
I'm not sure what I was thinking at the time. Maybe because it's tied to Inputs/Outputs and ng1 doesn't have the same semantics. It would probably be reasonably feasible to implement for '@' and '<' as inputs and '&' as outputs (with a small overhead), but with two-way binding it gets really muddy. But I can definitely be convinced otherwise. One of the main purposes of opening the issue was to get the discussion going. |
|
I'm not sure if
|
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 22, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
3 tasks
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$afterViewInit` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 23, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 24, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 24, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
to petebacondarwin/angular.js
that referenced
this issue
Mar 25, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes angular#14127
Closes angular#14030
Closes angular#14020
Closes angular#13991
Closes angular#14302
petebacondarwin
added a commit
that referenced
this issue
Mar 25, 2016
This change adds in the following new lifecycle hooks, which map in some
way to those in Angular 2:
* `$onChanges(changesObj)` - Called whenever one-way bindings are updated. The `changesObj` is a hash whose keys
are the names of the bound properties that have changed, and the values are an object of the form
`{ currentValue: ..., previousValue: ... }`. Use this hook to trigger updates within a component such as
cloning the bound value to prevent accidental mutation of the outer value.
* `$onDestroy` - Called on a controller when its containing scope is destroyed. Use this hook for releasing
external resources, watches and event handlers.
* `$postLink` - Called after this controller's element and its children been linked. Similar to the post-link
function this hook can be used to set up DOM event handlers and do direct DOM manipulation.
Note that child elements that contain `templateUrl` directives will not have been compiled and linked since
they are waiting for their template to load asynchronously and their own compilation and linking has been
suspended until that occurs.
Closes #14127
Closes #14030
Closes #14020
Closes #13991
Closes #14302
|
I am unable to get $onChanges to fire regardless what I try. To further complicate matters, the documentation is VERY vague and there are basically NO examples, etc. online (I am trying to get it working with ES6 modules). If anybody has a working example (with ES6) which you wish to share, I would be greatly appreciative. Thanks in advance... |
|
I don't have ES6 examples to hand - but here is a project that uses |
|
Looks like $onChanges only watch for changes on simple variables, so in objects it doesn´t do a deep check of the properties it only check if the object reference change. so if you change the object using angular.copy it will trigger the $onChanges |
|
@adrianolsk - absolutely. We made a conscious decision not to watch objects deeply for As you suggest, if you really care about tracking deep property changes on your inputs then rather than using |
|
Yeah like @adrianolsk mentions, it's probably easiest to just do a angular.copy to create a new object. Won't trigger $onChange if you're binding on complicatedObject: But this will: |
|
@gkalpak @adrianolsk Can you please explain why was doCheck considered not applicable? I think $doCheck hook could be used for cases like deep watching object properties supplementing $onChanges hook (as it is in angular 2). We encountered the need for it in a quite huge project when migrating to 1.5. Still using $scope seems counterproductive if one is planning to eventually migrate to angular 2, and the workaround proposed by @samal84 seems to be a bit of an overhead. |
|
There is actually a PR discussing this feature - #14656 - let's move the discussion there. |
|
Was struggling with this one too. Came up with an even simpler approach that avoids the overhead of angular.copy() and the step backwards to using $scope. Just don't deep watch the object. Add a one way binding directly to the nested property you want to observe in addition to it's parent $onChanges then works exactly as intended. |
|
BTW, we now support |
|
@kirinmurphy this seems to be the best approach indeed. However, complex objects with nested objects won't work either. You would basically have to break the object in every possible piece that you want to update with. This seems counter productive. PS: I think from a logical point of view avoiding the extremes is the better option - not just 1 object holding all properties of the controller, nor break it all apart, but 'chunks' of 'main' properties, that associate with general actions/updates from the app (a button click, UX events, etc). |
|
@khullah you can deep watch objects if you really want to: http://stackoverflow.com/questions/14712089/how-to-deep-watch-an-array-in-angularjs Just be mindful of the performance hit. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
I open this issue in order to track/discuss the implementation of lifecucle hooks to directive/component controllers.
Context
In our attempt to improve the upgrade path to Angular 2, it makes sense to allow developers structure their directive/component controllers is a way that is as easy as possible to migrate them to Angular 2 (ideally, there should be no modification of the controllers code necessary).
As part of this attempt, it will be useful to implement some of the lifecycle hooks available in Angular 2. (Obviously, it isn't necessary (or possible) to implement all of them, due to differences between ng1/ng2 internals.)
Lifecycle Hooks
OnInit: Implemented inv1.5.0as$onInit.OnDestroy: Useful (and probably straightforward to implement). Discussed in 1.5 Feature: Backport ngOnDestroy (as $onDestroy for example) exactly as ngOnInit ($onInit) #14020.DoCheck:Not applicable.Applicable. (See feat($compile): backport $doCheck #14656.)OnChanges:Not applicable.Applicable.AfterContentInit: Not sure how much more useful thanAfterViewInit(in the context of ng1).AfterContentCheckedAfterViewInit: Useful. Discussed in FormController: attach to component controller? #13991.AfterViewCheckedPostLink: Angular 1 specific.UPDATE:
Since we can't match the semantics of
AfterView/ContentInitclosely enough, we implemented a$postLinkhook instead, which is close (but not the same) and fits ng1 semantics better.The text was updated successfully, but these errors were encountered: