From 210b48e76927b52a99d63573bcfb199bbe430454 Mon Sep 17 00:00:00 2001 From: Gustavo Martin Morcuende Date: Sun, 13 Sep 2015 20:24:11 +0200 Subject: [PATCH] showcase: compile/prelink/postlink/controller calling order When having parent and child directives --- .../showcase/src/showcase/app/welcome/welcome.html | 32 +++++++- .../app/widgets/example-child.directive.html | 2 + .../app/widgets/example-child.directive.js | 55 +++++++++---- .../app/widgets/example-parent.directive.html | 5 ++ .../app/widgets/example-parent.directive.js | 96 ++++++++++++++++++++++ 5 files changed, 175 insertions(+), 15 deletions(-) create mode 100644 angularjs/showcase/src/showcase/app/widgets/example-child.directive.html create mode 100644 angularjs/showcase/src/showcase/app/widgets/example-parent.directive.html create mode 100644 angularjs/showcase/src/showcase/app/widgets/example-parent.directive.js diff --git a/angularjs/showcase/src/showcase/app/welcome/welcome.html b/angularjs/showcase/src/showcase/app/welcome/welcome.html index f47e20f..b2e2f94 100644 --- a/angularjs/showcase/src/showcase/app/welcome/welcome.html +++ b/angularjs/showcase/src/showcase/app/welcome/welcome.html @@ -8,4 +8,34 @@
- \ No newline at end of file + + + // BE CAREFUL, THE LOADING ORDER IS DIFFERENT WHEN USING templateUrl TO WHEN USING template!!!

+ + // ****** console output when using templateUrl in parent and child directives: ******
+ //XHR finished loading: GET "http://localhost:9000/app/widgets/example-parent.directive.html"
+ //example-parent.directive.js:67 PARENT-DIRECTIVE: compile
+ //example-parent.directive.js:91 PARENT-DIRECTIVE: controller
+ //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink
+ //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink
+ //XHR finished loading: GET "http://localhost:9000/app/widgets/example-child.directive.html".
+ //example-child.directive.js:63 CHILD-DIRECTIVE: compile
+ //example-child.directive.js:87 CHILD-DIRECTIVE: controller
+ //example-child.directive.js:66 CHILD-DIRECTIVE: preLink
+ //example-child.directive.js:69 CHILD-DIRECTIVE: postLink

+ + // ****** console output when using template in parent and child directives: ******
+ //example-parent.directive.js:67 PARENT-DIRECTIVE: compile
+ //example-child.directive.js:63 CHILD-DIRECTIVE: compile
+ //example-parent.directive.js:91 PARENT-DIRECTIVE: controller
+ //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink
+ //example-child.directive.js:87 CHILD-DIRECTIVE: controller
+ //example-child.directive.js:66 CHILD-DIRECTIVE: preLink
+ //example-child.directive.js:69 CHILD-DIRECTIVE: postLink
+ //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink

+ + + + + + diff --git a/angularjs/showcase/src/showcase/app/widgets/example-child.directive.html b/angularjs/showcase/src/showcase/app/widgets/example-child.directive.html new file mode 100644 index 0000000..8ff52eb --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-child.directive.html @@ -0,0 +1,2 @@ + +
child directive html template
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-child.directive.js b/angularjs/showcase/src/showcase/app/widgets/example-child.directive.js index 6d65816..e0be270 100644 --- a/angularjs/showcase/src/showcase/app/widgets/example-child.directive.js +++ b/angularjs/showcase/src/showcase/app/widgets/example-child.directive.js @@ -3,11 +3,11 @@ angular .module('app.widgets') - .directive('parentDirective', parentDirective); + .directive('childDirective', childDirective); /** * @ngdoc directive - * @name app.widgets.directive:parentDirective + * @name app.widgets.directive:childDirective * @restrict EA * @requires $scope * @@ -17,47 +17,74 @@ *

* * @description - * Controller directive example. + * Controller child directive example. * - * @element parent-directive + * @element child-directive * * @example - + */ - function parentDirective() { + function childDirective() { return { restrict: 'EA', - templateUrl: 'app/widgets/example-parent.directive.html', + templateUrl: 'app/widgets/example-child.directive.html', + + // BE CAREFUL, THE LOADING ORDER IS DIFFERENT WHEN USING templateUrl TO WHEN USING template!!! + + // ****** console output when using templateUrl in parent and child directives: ****** + //XHR finished loading: GET "http://localhost:9000/app/widgets/example-parent.directive.html" + //example-parent.directive.js:67 PARENT-DIRECTIVE: compile + //example-parent.directive.js:91 PARENT-DIRECTIVE: controller + //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink + //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink + //XHR finished loading: GET "http://localhost:9000/app/widgets/example-child.directive.html". + //example-child.directive.js:63 CHILD-DIRECTIVE: compile + //example-child.directive.js:87 CHILD-DIRECTIVE: controller + //example-child.directive.js:66 CHILD-DIRECTIVE: preLink + //example-child.directive.js:69 CHILD-DIRECTIVE: postLink + + // ****** console output when using template in parent and child directives: ****** + //example-parent.directive.js:67 PARENT-DIRECTIVE: compile + //example-child.directive.js:63 CHILD-DIRECTIVE: compile + //example-parent.directive.js:91 PARENT-DIRECTIVE: controller + //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink + //example-child.directive.js:87 CHILD-DIRECTIVE: controller + //example-child.directive.js:66 CHILD-DIRECTIVE: preLink + //example-child.directive.js:69 CHILD-DIRECTIVE: postLink + //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink + + //template: '
child directive html template
', link: linkFunc, compile: function compile(element, attributes, transcludeFn) { - console.log('PARENT-DIRECTIVE: compile'); + console.log('CHILD-DIRECTIVE: compile'); return { pre: function preLink(scope, element, attributes, controller, transcludeFn) { - console.log('PARENT-DIRECTIVE: preLink'); + console.log('CHILD-DIRECTIVE: preLink'); }, post: function postLink(scope, element, attributes, controller, transcludeFn) { - console.log('PARENT-DIRECTIVE: postLink'); + console.log('CHILD-DIRECTIVE: postLink'); } }; }, - controller: ExampleParentController, + controller: ExampleChildController, scope: { max: '=' } }; function linkFunc(scope, el, attr, ctrl) { - console.log('PARENT-DIRECTIVE: linkFunc'); + // This function will never be used because we are implementing the compile attribute. + console.log('CHILD-DIRECTIVE: linkFunc'); } } /* @ngInject */ - function ExampleParentController($scope) { - console.log('PARENT-DIRECTIVE: controller'); + function ExampleChildController($scope) { + console.log('CHILD-DIRECTIVE: controller'); $scope.min = 3; } diff --git a/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.html b/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.html new file mode 100644 index 0000000..bbc83cd --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.html @@ -0,0 +1,5 @@ + +
parent directive html template
+ + + diff --git a/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.js b/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.js new file mode 100644 index 0000000..e7f79f0 --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-parent.directive.js @@ -0,0 +1,96 @@ +(function () { + 'use strict'; + + angular + .module('app.widgets') + .directive('parentDirective', parentDirective); + + /** + * @ngdoc directive + * @name app.widgets.directive:parentDirective + * @restrict EA + * @requires $scope + * + *

+ *
+ * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope} + *

+ * + * @description + * Controller parent directive example. + * + * @element parent-directive + * + * @example + + + + + + */ + function parentDirective() { + return { + restrict: 'EA', + templateUrl: 'app/widgets/example-parent.directive.html', + + // BE CAREFUL, THE LOADING ORDER IS DIFFERENT WHEN USING templateUrl TO WHEN USING template!!! + + // ****** console output when using templateUrl in parent and child directives: ****** + //XHR finished loading: GET "http://localhost:9000/app/widgets/example-parent.directive.html" + //example-parent.directive.js:67 PARENT-DIRECTIVE: compile + //example-parent.directive.js:91 PARENT-DIRECTIVE: controller + //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink + //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink + //XHR finished loading: GET "http://localhost:9000/app/widgets/example-child.directive.html". + //example-child.directive.js:63 CHILD-DIRECTIVE: compile + //example-child.directive.js:87 CHILD-DIRECTIVE: controller + //example-child.directive.js:66 CHILD-DIRECTIVE: preLink + //example-child.directive.js:69 CHILD-DIRECTIVE: postLink + + // ****** console output when using template in parent and child directives: ****** + //example-parent.directive.js:67 PARENT-DIRECTIVE: compile + //example-child.directive.js:63 CHILD-DIRECTIVE: compile + //example-parent.directive.js:91 PARENT-DIRECTIVE: controller + //example-parent.directive.js:70 PARENT-DIRECTIVE: preLink + //example-child.directive.js:87 CHILD-DIRECTIVE: controller + //example-child.directive.js:66 CHILD-DIRECTIVE: preLink + //example-child.directive.js:69 CHILD-DIRECTIVE: postLink + //example-parent.directive.js:73 PARENT-DIRECTIVE: postLink + + //template: '' + + //'
parent directive html template
' + + //'' + + //'' + + //'', + link: linkFunc, + compile: function compile(element, attributes, transcludeFn) { + console.log('PARENT-DIRECTIVE: compile'); + return { + pre: function preLink(scope, element, attributes, controller, transcludeFn) { + console.log('PARENT-DIRECTIVE: preLink'); + }, + post: function postLink(scope, element, attributes, controller, transcludeFn) { + console.log('PARENT-DIRECTIVE: postLink'); + } + }; + }, + controller: ExampleParentController, + scope: { + max: '=' + } + }; + + function linkFunc(scope, el, attr, ctrl) { + // This function will never be used because we are implementing the compile attribute. + console.log('PARENT-DIRECTIVE: linkFunc'); + } + } + + /* @ngInject */ + function ExampleParentController($scope) { + console.log('PARENT-DIRECTIVE: controller'); + + $scope.min = 3; + } + +})(); -- 2.1.4