}
};
- function linkFunc(scope, el, attr, ctrl) {
- console.log('LINK: scope doesn\'t contain the min and max properties:');
- console.log('LINK: min, because it was assigned to vm/this');
- console.log('LINK: max, because we are using bindToController and max is a property of our controller ' +
- '(vm/this) instead of our scope.');
- console.log('LINK: scope.min = %s *** should be undefined', scope.min);
- console.log('LINK: scope.max = %s *** should be undefined', scope.max);
- console.log('LINK: min has the value assigned in our controller');
- console.log('LINK: max is undefined because we didn\'t assign any value');
- console.log('LINK: scope.vm.min = %s', scope.vm.min);
- console.log('LINK: scope.vm.max = %s', scope.vm.max);
+ function linkFunc(scope, el, attr, vm) {
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope doesn\'t contain the min, max and controller properties:');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: min, because it was assigned to vm/this');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: max, because we are using bindToController and max is a property of ' +
+ 'our controller (vm/this) instead of our scope.');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: controller, because it was assigned to vm/this');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.min = %s *** should be undefined', scope.min);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.max = %s *** should be undefined', scope.max);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.controller = %s *** should be undefined', scope.controller);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: min has the value assigned in our controller');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: max is undefined because we didn\'t assign any value');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: controller has the value assigned in our controller');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.min = %s', scope.vm.min);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.max = %s', scope.vm.max);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: scope.vm.max = %s', scope.vm.controller);
+
+ scope.vm.postlink = 'Value created in postlink';
+
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: because we are using \'controller as\' the fourth parameter is our ' +
+ 'controller\'s instance');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.min has the value assigned in our controller');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.max is undefined because we didn\'t assign any value');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.controller has the value assigned in our controller');
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.min = %s', vm.min);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.max = %s', vm.max);
+ console.log('CONTROLLER-AS-DIRECTIVE LINK: vm.controller = %s', vm.controller);
}
}
vm.min = 3;
- console.log('CTRL: $scope object contains vm. It doesn\'t contain max property because we are using ' +
- 'bindToController. What means, max property will be assigned in our controller (vm/this) instead of our scope.');
- console.log('CTRL: $scope.vm.min = %s', $scope.vm.min);
- console.log('CTRL: $scope.vm.max = %s', $scope.vm.max);
- console.log('CTRL: vm.min = %s', vm.min);
- console.log('CTRL: vm.max = %s', vm.max);
+ console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope object contains vm. It doesn\'t contain max property because ' +
+ 'we are using bindToController. What means, max property will be assigned in our controller (vm/this) instead ' +
+ 'of our scope.');
+ console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope.vm.min = %s', $scope.vm.min);
+ console.log('CONTROLLER-AS-DIRECTIVE CTRL: $scope.vm.max = %s', $scope.vm.max);
+ console.log('CONTROLLER-AS-DIRECTIVE CTRL: vm.min = %s', vm.min);
+ console.log('CONTROLLER-AS-DIRECTIVE CTRL: vm.max = %s', vm.max);
+
+ vm.controller = 'Value created in controller';
}
})();
--- /dev/null
+(function () {
+ 'use strict';
+
+ angular
+ .module('app.widgets')
+ .directive('controllerDirective', controllerDirective);
+
+ /**
+ * @ngdoc directive
+ * @name app.widgets.directive:controllerDirective
+ * @restrict EA
+ * @requires $scope
+ *
+ * <p>
+ * <br>
+ * {@link https://docs.angularjs.org/api/ng/type/$rootScope.Scope $scope}
+ * </p>
+ *
+ * @description
+ * Controller directive example.
+ *
+ * @element controller-directive
+ *
+ * @example
+ <example name="controller-directive" module="app.widgets">
+ <file name="index.html">
+ <controller-directive>
+ </file>
+ </example>
+ */
+ function controllerDirective() {
+ return {
+ restrict: 'EA',
+ templateUrl: 'app/widgets/example-controller.directive.html',
+ link: linkFunc,
+ controller: ExampleController,
+ scope: {
+ max: '='
+ }
+ };
+
+ function linkFunc(scope, el, attr, ctrl) {
+ console.log('CONTROLLER-DIRECTIVE LINK: scope contains the min, max and controller properties:');
+ console.log('CONTROLLER-DIRECTIVE LINK: scope.min = %s', scope.min);
+ console.log('CONTROLLER-DIRECTIVE LINK: scope.max = %s *** should be undefined', scope.max);
+ console.log('CONTROLLER-DIRECTIVE LINK: scope.controller = %s', scope.controller);
+
+ scope.postlink = 'Value created in postlink';
+
+ console.log('CONTROLLER-DIRECTIVE LINK: because we are NOT using \'controller as\' the fourth parameter is our ' +
+ 'controller\'s instance but it doesn\'t have anything interesting!!!!');
+ console.log('CONTROLLER-DIRECTIVE LINK: ctrl.min = %s *** should be undefined', ctrl.min);
+ console.log('CONTROLLER-DIRECTIVE LINK: ctrl.max = %s *** should be undefined', ctrl.max);
+ console.log('CONTROLLER-DIRECTIVE LINK: ctrl.controller = %s *** should be undefined', ctrl.controller);
+ }
+ }
+
+ /* @ngInject */
+ function ExampleController($scope) {
+
+ $scope.min = 3;
+
+ console.log('CONTROLLER-DIRECTIVE CTRL: $scope.min = %s', $scope.min);
+ console.log('CONTROLLER-DIRECTIVE CTRL: $scope.max = %s', $scope.max);
+
+ $scope.controller = 'Value created in controller';
+ }
+
+})();
projects / JavaScriptForFun / commitdiff