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

Commit f60d0c4

Browse files
feat($compile): add more lifecycle hooks to directive controllers
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
1 parent aca8559 commit f60d0c4

File tree

1 file changed

+28
-1
lines changed

1 file changed

+28
-1
lines changed

Diff for: test/ng/compileSpec.js

+28-1
Original file line numberDiff line numberDiff line change
@@ -3822,7 +3822,7 @@ describe('$compile', function() {
38223822
inject(function($compile, $rootScope) {
38233823

38243824
// Setup the directive with two bindings
3825-
element = $compile('<div><outer prop1="a"></outer>')($rootScope);
3825+
element = $compile('<outer prop1="a"></outer>')($rootScope);
38263826

38273827
// There should be no changes initially
38283828
expect(log).toEqual([]);
@@ -3836,6 +3836,33 @@ describe('$compile', function() {
38363836
]);
38373837
});
38383838
});
3839+
3840+
3841+
it('should throw a RangeError if `$onChanges()` hooks are not stable', function() {
3842+
function TestController() {}
3843+
TestController.prototype.$onChanges = function(change) {
3844+
this.onChange();
3845+
};
3846+
3847+
angular.module('my', [])
3848+
.component('c1', {
3849+
controller: TestController,
3850+
bindings: {'prop': '<', onChange: '&'}
3851+
});
3852+
3853+
module('my');
3854+
inject(function($compile, $rootScope) {
3855+
3856+
// Setup the directive with bindings that will keep updating the bound value forever
3857+
element = $compile('<c1 prop="a" on-change="a = -a"></outer>')($rootScope);
3858+
3859+
// Update val to trigger the unstable onChanges, which will result in a
3860+
// Range error - maximum call stack size exceeded
3861+
expect(function() {
3862+
$rootScope.$apply('a = 42');
3863+
}).toThrowError();
3864+
});
3865+
});
38393866
});
38403867
});
38413868

0 commit comments

Comments
 (0)