From: Gustavo Martin Morcuende Date: Mon, 7 Sep 2015 00:48:30 +0000 (+0200) Subject: showcase: directives, controllerAs X-Git-Url: https://git.gumartinm.name/?a=commitdiff_plain;h=0fc6cb0cedf9dbef3fc735c88c171502adf3822a;p=JavaScriptForFun showcase: directives, controllerAs --- diff --git a/angularjs/showcase/src/showcase/app/app.module.js b/angularjs/showcase/src/showcase/app/app.module.js index 70266f7..ae78ee7 100644 --- a/angularjs/showcase/src/showcase/app/app.module.js +++ b/angularjs/showcase/src/showcase/app/app.module.js @@ -19,6 +19,7 @@ angular.module('app', [ /* Shared modules */ 'app.core', + 'app.widgets', /* Feature areas */ 'app.welcome', diff --git a/angularjs/showcase/src/showcase/app/cars/cars.html b/angularjs/showcase/src/showcase/app/cars/cars.html index 960e253..7960653 100644 --- a/angularjs/showcase/src/showcase/app/cars/cars.html +++ b/angularjs/showcase/src/showcase/app/cars/cars.html @@ -27,4 +27,7 @@ Get cars - \ No newline at end of file + + + + diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html new file mode 100644 index 0000000..abd749a --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.html @@ -0,0 +1,4 @@ + +
hello world
+
max={{vm.max}}
+
min={{vm.min}}
diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js new file mode 100644 index 0000000..fa730ab --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.js @@ -0,0 +1,77 @@ +(function () { + 'use strict'; + + angular + .module('app.widgets') + .directive('controllerAsDirective', controllerAsDirective); + + /** + * @ngdoc directive + * @name app.widgets.directive:controllerAsDirective + * @restrict EA + * @requires $scope + * + *

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

+ * + * @description + * Controller as directive example. + * + * @element controller-as-directive + * + * @example + + + + + + */ + function controllerAsDirective() { + return { + restrict: 'EA', + templateUrl: 'app/widgets/example-controller-as.directive.html', + link: linkFunc, + controller: ExampleController, + controllerAs: 'vm', + scope: {}, + // Instead of defining the scope properties on scope, we declaratively define what properties are bound to the + // component’s controller. + // What means, max will become a property of this/vm and we could get rid of scope/$scope. + // THIS WORKS ONLY WHEN USING controllerAs IN DIRECTIVES!!! + bindToController: { + max: '=' + } + }; + + 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); + } + } + + /* @ngInject */ + function ExampleController($scope) { + // Injecting $scope just for comparison + var vm = this; + + 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); + } + +})(); diff --git a/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.spec.js b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.spec.js new file mode 100644 index 0000000..74fabb8 --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/example-controller-as.directive.spec.js @@ -0,0 +1,37 @@ +(function() { + 'use strict'; + + describe('exampleControllerAsDirective', function() { + var compile; + var rootScope; + var template; + + beforeEach(module('app.widgets')); + + beforeEach(inject(function($compile, $rootScope) { + compile = $compile; + rootScope = $rootScope; + template = ''; + })); + + it('should assign min value 3', function() { + var scope; + var element; + var vm; + + scope = rootScope.$new(); + // IN THE REAL WORLD, BETTER DECLARE THE CONTROLLER RELATED TO MY DIRECTIVE IN A DIFFERENT FILE AND + // TEST THE CONTROLLER WITH ITS OWN SPEC!!!!! + // see: http://stackoverflow.com/a/15314876 + element = compile(template)(scope); + scope.$digest(); + + vm = element.controller('controllerAsDirective'); + + expect(vm.min).toEqual(3); + + }); + + }); + +}()); diff --git a/angularjs/showcase/src/showcase/app/widgets/widgets.module.js b/angularjs/showcase/src/showcase/app/widgets/widgets.module.js new file mode 100644 index 0000000..de39fec --- /dev/null +++ b/angularjs/showcase/src/showcase/app/widgets/widgets.module.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + /** + * @ngdoc overview + * @name app.widgets + * + * @description + * # app.widgets + * + * ## Module widgets. + * Module for implementing widget directives. + */ + angular.module('app.widgets', [ + 'app.core' + ]); + +})(); diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html index 69e370e..3a1b96e 100644 --- a/angularjs/showcase/src/showcase/index.html +++ b/angularjs/showcase/src/showcase/index.html @@ -51,6 +51,8 @@ + +