diff --git a/component-conversion.md b/component-conversion.md new file mode 100644 index 000000000..077ceff04 --- /dev/null +++ b/component-conversion.md @@ -0,0 +1,67 @@ +# Converting Angular 1.4 style directives to Angular 1.5 + +## Directive Conversion +1. Rename file from name-directive.js to name.component.js +2. In the directive - modify the following: + ``` + angular.module('patternfly.notification').directive('pfNotificationDrawer', function ($window, $timeout) { + 'use strict'; + return { + restrict: 'A', + scope: { + scrollSelector: '@', + groupHeight: '@', + groupClass: '@' + }, + controller: function($window, $timeout) { + $scope.toggle = function () { + + + + angular.module('patternfly.notification').component('pfNotificationDrawer', { + bindings: { + scrollSelector: '@', + groupHeight: '@', + groupClass: '@' + }, + controller: function ($window, $timeout) { + 'use strict'; + var ctrl = this; + + ctrl.toggle = function () { + ``` +3. Any initialization logic should be moved out of link functions and into $onInit functions +4. Any event listeners that are added for $window or $timeout events should be cleaned up in $onDestroy +5. $scope watchers should be moved to $onChanges for bound properties (defined in bindings object) +6. If DOM manipulation still must happen, there is a $postLink function. A bit more investigation will be necessary to see if these components can be upgraded to Angular 2. + +## View Conversion +In the template referenced by the templateUrl in the component, some changes have to be made. Anywhere a former $scope variable is referenced, you'll need to prepend $ctrl + ``` +