├── .gitignore ├── .npmignore ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── demo ├── angular-avatar-autocolor-example.png ├── angular-avatar-basic-example.png ├── angular-avatar-examples.png ├── angular-avatar-logo.png ├── angular-avatar-palette.png ├── demo-1.html ├── demo-2.html ├── demo-3.html ├── demo-4.html └── demo-5.html ├── dist ├── angular-avatar.js └── angular-avatar.min.js ├── package-lock.json ├── package.json ├── src └── angular-avatar.js └── tests ├── karma.conf.js ├── test-angular-avatar.html └── test-angular-avatar.js /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .project 3 | _.* 4 | .DS_Store 5 | Thumbs.db 6 | .settings 7 | /.gitmodules 8 | .tmp 9 | .idea 10 | OLD* 11 | node_modules 12 | bower_components 13 | *.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | webpack.config.js 2 | webpack.local.config.js 3 | webpack.production.config.js 4 | .eslintrc 5 | .gitignore 6 | .babelrc 7 | scripts 8 | src 9 | demo 10 | stories 11 | eslint-config.js 12 | yarn* 13 | node_modules/ 14 | /tests 15 | /build 16 | /demo 17 | /docs 18 | /src 19 | /*.config.js 20 | /.* 21 | .DS_Store 22 | storybook-static 23 | _.* -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.1.0" 4 | script: node_modules/karma/bin/karma start tests/karma.conf.js --single-run 5 | before_install: 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | before_script: 9 | - npm install -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch: { 7 | scripts: { 8 | files: [ 9 | 'src/*.*' 10 | ], 11 | tasks: ['test'], 12 | options: { 13 | livereload: 9090, 14 | } 15 | } 16 | }, 17 | clean: { 18 | build: { 19 | src: ['dist/*'] 20 | } 21 | }, 22 | copy: { 23 | build: { 24 | files: [{ 25 | cwd: 'src', 26 | src: [ 27 | '**', 28 | ], 29 | dest: 'dist', 30 | expand: true 31 | }] 32 | } 33 | }, 34 | uglify: { 35 | options: { 36 | preserveComments: 'some', // will preserve all comments that start with a bang (!) or include a closure compiler style directive (@preserve) 37 | mangle: false, // false to prevent changes to your variable and function names. 38 | compress: { 39 | drop_console: true 40 | } 41 | }, 42 | my_target: { 43 | files: { 44 | 'dist/angular-avatar.min.js': ['dist/angular-avatar.js'] 45 | } 46 | } 47 | }, 48 | karma: { 49 | unit: { 50 | configFile: 'tests/karma.conf.js', 51 | singleRun: true 52 | } 53 | } 54 | }); 55 | 56 | // Include functionality 57 | grunt.loadNpmTasks('grunt-contrib-watch'); 58 | grunt.loadNpmTasks('grunt-contrib-clean'); 59 | grunt.loadNpmTasks('grunt-contrib-copy'); 60 | grunt.loadNpmTasks('grunt-contrib-uglify'); 61 | grunt.loadNpmTasks('grunt-karma'); 62 | 63 | grunt.registerTask('default', ['watch']); 64 | grunt.registerTask('dev', ['watch']); 65 | grunt.registerTask('build', ['clean', 'copy', 'uglify']); 66 | grunt.registerTask('test', ['karma']); 67 | 68 | }; 69 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-avatar [![Build Status](https://travis-ci.org/ajsoriar/angular-avatar.svg?branch=master)](https://travis-ci.org/ajsoriar/angular-avatar) 2 | 3 | [![npm version](https://badge.fury.io/js/angular-avatar.svg)](https://badge.fury.io/js/angular-avatar) 4 | [![Bower version](https://badge.fury.io/bo/angular-avatar.svg)](https://badge.fury.io/bo/angular-avatar) 5 | [![NuGet version](https://badge.fury.io/nu/angular-avatar.svg)](https://badge.fury.io/nu/angular-avatar) 6 | 7 | Angular Avatar is a simple and lightweight AngularJS directive that generates a letter's avatar like Microsoft or Google do in their web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will be rendered in an html img tag as a real png or jpeg. The image data can be retrieved using javascript to be stored in back-end giving you an initial profile picture in your web or mobile apps when the user does not upload one. Several angular atributes are available to configure the output: size, shape, resolution, colors, etc. 8 | 9 | ![angular-avatar auto-color feature examples](./demo/angular-avatar-autocolor-example.png?raw=true "angular-avatar auto-color feature examples") 10 | 11 | This example in plunker: https://plnkr.co/edit/bhnvU3?p=preview 12 | 13 | React version here: 14 | 15 | ## Quick start 16 | 17 | ### 1 Download and Install angular-avatar 18 | 19 | - Yarn: **yarn add angular-avatar** 20 | - Bower: **bower install angular-avatar** 21 | - NPM: **npm install angular-avatar** 22 | - NuGet: **PM> Install-Package angular-avatar** 23 | - github: **https://github.com/ajsoriar/angular-avatar** 24 | 25 | ### 2 Include dependences 26 | 27 | 2.1 angular-avatar.js or angular-avatar.min.js are under dist folder. 28 | 29 | 2.2 Include angular-avatar.js or angular-avatar.min.js after angular dependences, e.g. 30 | 31 | ```javascript 32 | 33 | 34 | 35 | ``` 36 | 37 | 2.3 Add ngAvatar module as a dependency when creating your app, e.g. 38 | 39 | ```javascript 40 | var app = angular.module('myApp', ['ngAvatar']); 41 | ``` 42 | 43 | ### 3 Use it 44 | 45 | No need to inject in controllers just use it in your html code this way: 46 | 47 | ```javascript 48 | 49 | ``` 50 | 51 | You will get this: 52 | ![angular-avatar basic usage example](./demo/angular-avatar-basic-example.png?raw=true "angular-avatar basic usage example") 53 | 54 | This code will be generated by the directive: 55 | 56 | ```javascript 57 |
58 | 59 |
60 | ``` 61 | 62 | More usage examples ready to copy and paste: :+1: 63 | 64 | ```javascript 65 | 66 |
67 | 68 |
69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 |
77 |
78 | ``` 79 | 80 | You will get this: 81 | 82 | ![More angular-avatar basic usage examples](./demo/angular-avatar-examples.png?raw=true "More angular-avatar basic usage examples") 83 | 84 | Run the live example in plunker: http://plnkr.co/edit/TfCxUn?p=preview 85 | 86 | ### 4 Attributes 87 | 88 | | option | default | description | 89 | | :------------------- | :----- | :--------------------- | 90 | | `initials` | null | Letters that will be rendered inside the avatar. Commonly the initials of first name and last name or a username. One, two or three letters can be used. | 91 | | `string` | null | Here you can put a group of words like a sentence or your complete name. The first letter of each word will be used to generate the avatar's image. | 92 | | `bind` | null | The avatar component will listen for changes in `string` and `initials`. If the value of the data source in the controller changes the avatar will change as well. | 93 | | `max-length` | null | Limits the number of characters that the avatar displays. | 94 | | `width` | 45 | An integer that sets the avatar's width and height in pixels using styles. Height of the avatar will be taken from it's width attribute. height attribute doesn't exist. | 95 | | `bg-color` | #000 | This is the background color of the avatar. If not set, the background will be black. You can use regular css color's like color names, hex or rgb. | 96 | | `text-color` | #fff | The color of the letters. Letters will be white if this attribute is not set. Use regular css colors. | 97 | | `upper-case` | false | Just put `upper-case="true"` and the input string will be transformed into capitals. | 98 | | `round-shape` | false | When set to `true` the avatar will take a round shape. By default the avatar will have a square shape. | 99 | | `corner-radius` | 0 | Square avatars can have rounded corners using this property. | 100 | | `picture-resolution` | 256 | This attribute sets the real resolution (width and height in pixels) of the picture that this directive generates. `width` attribute will scale the picture using only styles. | 101 | | `pixelated` | false | If ng-avatar's `width` is bigger than `picture-resolution` attribute, the web browser will scale the image and we will get a blurry picture. This attribute deactivates the anti-aliasing effect and you will get a pixelated image. Useful If you want a retro styling. | 102 | | `wrapper` | true | ng-avatar generates an img tag and a div layer that wraps the image. A boolean false value removes the div that wraps the avatar's image. This wrapping div has an special class `class="avatar-wrapper"` that can be used to apply extra styling. ng-avatar uses this div to generate a round avatar applying extra styles when round-shape attribute is true, `round-shape="true"` | 103 | | `class` | null | Use this attribute in the same way it is used in common html tags. | 104 | | `img-class` | null | Add an additional class to the generated image. Use the attribute in the same way it is used in common html tags. | 105 | | `style` | null | Use this attribute in the same way it is used in common html tags. | 106 | | `picture-format` | png | Set `picture-format="jpeg"` and the avatar will be rendered as a jpeg. If not set, png format will be used by default. | 107 | | `auto-color` | false | By default the generated picture will have a black background if no color is assigned. Setting `auto-color="true"` will automatically assign a color to the avatar's background depending on the combination of characters used. | 108 | | `use-full-string-for-colors` | false | When using `auto-color` and `string`, determines the color based on all of the characters in the string, not just the initials | 109 | | `colors-palette` | default colors | Change the palette used by `auto-color`. You can provide an array in your HTML or via the controller. | 110 | | `text-shadow` | false | This paints an elegant thin shadow around the edges of each letter. | 111 | 112 | ### 5 License 113 | 114 | MIT 115 | 116 | Copyright (c) 2016 117 | 118 | Permission is hereby granted, free of charge, to any person obtaining a copy 119 | of this software and associated documentation files (the "Software"), to deal 120 | in the Software without restriction, including without limitation the rights 121 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 122 | copies of the Software, and to permit persons to whom the Software is 123 | furnished to do so, subject to the following conditions: 124 | 125 | The above copyright notice and this permission notice shall be included in all 126 | copies or substantial portions of the Software. 127 | 128 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 129 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 130 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 131 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 132 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 133 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 134 | SOFTWARE. 135 | 136 | **Free Software, Yeah!** 137 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-avatar", 3 | "version": "1.3.0", 4 | "homepage": "https://github.com/ajsoriar/angular-avatar", 5 | "authors": [ 6 | "Andres J. Soria R. " 7 | ], 8 | "description": "Angular Avatar is a simple and lightweight AngularJS directive that generates a letter's avatar like Microsoft or Google do in their web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will be rendered in an html img tag as a real png or jpeg. The image data can be retrieved using javascript to be stored in back-end giving you an initial profile picture in your web or mobile apps when the user does not upload one. Several angular atributes are available to configure the output: size, shape, resolution, colors, etc.", 9 | "main": "dist/angular-avatar.min.js", 10 | "moduleType": [], 11 | "keywords": [ 12 | "avatar", "angular-avatar", "letter avatar", "initials avatar", "angular avatar", "profile picture", "string avatar", "ng-avatar" 13 | ], 14 | "dependencies": { 15 | "angular": "1.4.5" 16 | }, 17 | "devDependencies": { 18 | "angular-mocks": "1.4.5" 19 | }, 20 | "license": "MIT", 21 | "ignore": [ 22 | "**/.*", 23 | "node_modules", 24 | "bower_components", 25 | "tests" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /demo/angular-avatar-autocolor-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajsoriar/angular-avatar/44fd00a87d78eeff936f720401ace25cdccaa987/demo/angular-avatar-autocolor-example.png -------------------------------------------------------------------------------- /demo/angular-avatar-basic-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajsoriar/angular-avatar/44fd00a87d78eeff936f720401ace25cdccaa987/demo/angular-avatar-basic-example.png -------------------------------------------------------------------------------- /demo/angular-avatar-examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajsoriar/angular-avatar/44fd00a87d78eeff936f720401ace25cdccaa987/demo/angular-avatar-examples.png -------------------------------------------------------------------------------- /demo/angular-avatar-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajsoriar/angular-avatar/44fd00a87d78eeff936f720401ace25cdccaa987/demo/angular-avatar-logo.png -------------------------------------------------------------------------------- /demo/angular-avatar-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajsoriar/angular-avatar/44fd00a87d78eeff936f720401ace25cdccaa987/demo/angular-avatar-palette.png -------------------------------------------------------------------------------- /demo/demo-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 20 | 21 |

Hello angular-avatar!

22 | 23 | 24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /demo/demo-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 21 | 31 | 32 | 33 | 34 | 35 | 36 |

Hello angular-avatar autocolor!

37 | 38 | 
auto-color="true" font-weight="100" font-scale="150"
39 |
40 | 41 | 
auto-color="true" font-weight="400" font-scale="100"
42 |
43 | 44 | 
width="100" auto-color="true" font-weight="700" font-scale="50" round-shape="true"
45 |
46 | 47 | 
width="120" auto-color="true" font-weight="100" font-scale="125" corner-radius="7" text-shadow="true"
48 |
49 | 50 | 
width="120" auto-color="true" colors-palette='["#ffe082" ,"#ffd54f","#ffca28","#ffc107","#ffb300","#ffa000", "#ff8f00","#ff6f00","#e65100","#ef6c00","#f57c00", "#fb8c00", "#ff9800", "#ffa726"]' font-weight="100" font-scale="125" corner-radius="7" text-shadow="true"
51 |
52 | 53 | 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /demo/demo-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 21 | 22 | 64 | 65 | 66 | 67 | 68 | 69 |

Hello {{profile.name}}! Hello data binding.

70 | 71 | 
This is an static directive
72 | 73 | 74 |
75 | 76 |
77 | 78 | Change this text: 79 | 80 | 81 | 82 | 
We've got a bound directive here (string attribute)
83 | 84 | 85 | 86 | 'auto-color="true"' but 'bg-color="cyan"' overwrites auto-color value. 87 | 88 | 89 | 
We've got a bound directive here (initials attribute)
90 | 91 | 92 | 
We've got a bound directive here that will change all the time
93 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /demo/demo-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 21 | 22 | 86 | 87 | 88 | 89 | 90 | 91 |

Hello angular-avatar custom color palette!

92 | 93 | 
Default color's palette:
94 |
95 | 96 |
97 | 
Custom color's palette:
 98 |     
$scope.new_palette = ["#d3e22b","#bbd534","#a6ca3a","#8fbe3d","#79b340","#63aa42","#48a044","#249744"]; 
 99 |     
colors-palette="new_palette"
100 |
101 | 102 |
103 | 104 | 105 |
106 | 
Custom color's palette: $scope.new_palette = ["#ff0000","#ffff00","#00ff00","#00ffff","#0000ff","#ff00ff"];
107 |
108 | 109 | 110 | 111 | 112 | -------------------------------------------------------------------------------- /demo/demo-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 18 | 19 | 20 | 21 | 31 | 32 | 33 | 34 | 35 | 36 |

Hello angular-avatar autocolor!

37 | 38 | 
auto-color="true" use-full-string-for-colors="true"
39 |
40 | 41 | 
auto-color="true"
42 |
43 | 44 |

use-full-string-for-colors

45 |

When using auto-color and string, the option use-full-string-for-colors will determine the color based on all of the characters in the string, not just the initials

46 | 47 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /dist/angular-avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * angular-avatar 3 | * Angular Avatar is an AngularJS directive that generates a letter's avatar like Google does in several web apps. First letter of each word in a string will be used to generate the avatar. 4 | * @version v1.4.0 - 2020-10-26 5 | * @link https://github.com/ajsoriar/angular-avatar 6 | * @author Andres J. Soria R. 7 | * @license MIT License, http://www.opensource.org/licenses/MIT 8 | */ 9 | 10 | (function() { 11 | 12 | 'use strict'; 13 | 14 | var ngavatar = angular.module('ngAvatar', []); 15 | 16 | ngavatar.directive('ngAvatar', [function() { 17 | 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: { 22 | initials: '@initials', 23 | width: '@width', 24 | bgcolor: '@bgColor', 25 | textColor: '@textColor', 26 | wrapper: '=wrapper', 27 | pictureResolution: '@pictureResolution', 28 | pixelated: '=pixelated', 29 | roundShape: '=roundShape', 30 | class: '@class', 31 | imgClass: '@imgClass', 32 | style: '@style', 33 | string:'@string', 34 | cornerRadius: '@cornerRadius', 35 | pictureFormat: '@pictureFormat', 36 | colorsPalette: '=colorsPalette', 37 | autoColor: '=autoColor', 38 | useFullStringForColors: '=useFullStringForColors', 39 | fontWeight: '@fontWeight', 40 | fontScale: '@fontScale', 41 | textShadow: '=textShadow', 42 | bind: '=bind', 43 | maxLength: '@maxLength', 44 | upperCase: '=upperCase' 45 | }, 46 | link: function(scope, element, attrs) { 47 | 48 | var _long = 45, 49 | _picture_resolution = 256, 50 | _wrapper = true, 51 | _str = "", //scope.initials || "", 52 | _bgcolor = "#000", 53 | _textcolor = "#fff", 54 | _pixelated = false, 55 | _img_styling = "vertical-align:top;", 56 | _roundShape = false, 57 | _wrapper_styling = "border-radius:0; display:block; overflow:hidden;", 58 | _extra_classes = "", 59 | _extra_img_classes = "", 60 | _extra_styles = "", 61 | _corner_radius = "0", 62 | _picture_format = "png", 63 | _colors_palette = ["#bdc3c7","#6f7b87","#2c3e50","#2f3193","#662d91","#922790","#ec2176","#ed1c24","#f36622","#f8941e","#fab70f","#fdde00","#d1d219","#8ec73f","#00a650","#00aa9c","#00adef","#0081cd","#005bab"], 64 | _autoColor = false, 65 | _useFullStringForColors = false, 66 | _font_weight = 100, 67 | _font_scale = 100, 68 | _text_shadow = false, 69 | _bind = false, 70 | _img_width = "100%", 71 | _upperCase = false; 72 | 73 | function checkValues(){ 74 | 75 | if (scope.bind != undefined){ 76 | _bind = scope.bind; 77 | } 78 | 79 | if (scope.textColor != undefined) { 80 | _textcolor = scope.textColor; 81 | } 82 | 83 | if (scope.pictureResolution != undefined) { 84 | _picture_resolution = scope.pictureResolution; 85 | } 86 | 87 | if (scope.width != undefined) { 88 | _long = scope.width; 89 | } 90 | 91 | if (scope.wrapper != undefined) { 92 | _wrapper = scope.wrapper; 93 | if ( _wrapper === false ) { 94 | _img_width = _long; 95 | } 96 | } 97 | 98 | if (scope.pixelated != undefined) { 99 | _pixelated = scope.pixelated; 100 | if ( _pixelated === true ) { 101 | _img_styling += "image-rendering:pixelated; image-rendering:-moz-crisp-edges;"; 102 | } 103 | } 104 | 105 | if (scope.roundShape != undefined) { 106 | _roundShape = scope.roundShape; 107 | if ( _roundShape ) _wrapper_styling += "border-radius: "+ _long +"px;"; 108 | } else { 109 | if ( scope.cornerRadius != undefined ){ 110 | _corner_radius = scope.cornerRadius; 111 | _wrapper_styling += "border-radius: "+ _corner_radius +"px;"; 112 | } 113 | } 114 | 115 | if (scope.class != undefined) { 116 | _extra_classes = scope.class; 117 | } 118 | 119 | if (scope.imgClass != undefined) { 120 | _extra_img_classes = scope.imgClass; 121 | } 122 | 123 | if (scope.style != undefined) { 124 | _extra_styles = scope.style; 125 | } 126 | 127 | if (scope.initials != undefined) { 128 | _str = scope.initials; 129 | } 130 | 131 | if (scope.string != undefined) { 132 | _str = getInitialsFromString( scope.string ); 133 | } 134 | 135 | if (scope.maxLength != undefined) { 136 | _str = _str.substr(0, scope.maxLength ); 137 | } 138 | 139 | if (scope.pictureFormat === 'jpeg') { 140 | _picture_format = "jpeg"; 141 | } 142 | 143 | if (scope.colorsPalette != undefined) { 144 | _colors_palette = scope.colorsPalette; 145 | } 146 | 147 | if (scope.bgcolor != undefined) { 148 | _bgcolor = scope.bgcolor; 149 | } else { 150 | 151 | if (scope.autoColor != undefined) { 152 | if (scope.useFullStringForColors != undefined) { 153 | _useFullStringForColors = scope.useFullStringForColors; 154 | } 155 | 156 | _autoColor = scope.autoColor; 157 | if ( _autoColor === true ) { 158 | if (_useFullStringForColors === true && scope.string != undefined) { 159 | var i, lon = scope.string.length, charIndex=0,colorIndex; 160 | for(i=0; i 0) { 197 | if (h != undefined && h > 0) { 198 | WIDTH = w; 199 | HEIGHT = h; 200 | } 201 | } 202 | 203 | canvas = document.createElement('canvas'); 204 | canvas.id = "ngAvatar-" + Date.now(); 205 | canvas.width = WIDTH; 206 | canvas.height = HEIGHT; 207 | 208 | ctx = canvas.getContext('2d'); 209 | ctx.fillStyle = bgcolor; 210 | ctx.fillRect(0, 0, WIDTH, HEIGHT); 211 | 212 | _font_size = WIDTH / (2 / ( _font_scale / 100 )); 213 | ctx.font = _font_weight +" "+ _font_size +"px sans-serif"; 214 | 215 | if ( _text_shadow === true ) { 216 | ctx.shadowColor = "black"; 217 | ctx.shadowOffsetX = 0; 218 | ctx.shadowOffsetY = 0; 219 | ctx.shadowBlur = 5; 220 | } 221 | 222 | ctx.textAlign = "center"; 223 | ctx.fillStyle = textcolor; 224 | //ctx.fillText(_str, WIDTH / 2, HEIGHT - (HEIGHT / 2) + ( _font_size / 3) + 5 ); 225 | ctx.fillText( _str, WIDTH / 2, HEIGHT - (HEIGHT / 2) + ( _font_size / 3) ); 226 | 227 | return canvas.toDataURL("image/"+ _picture_format ); 228 | } 229 | 230 | function getInitialsFromString(str){ 231 | 232 | var output = "", 233 | i = 0, 234 | str = str.split(" "), 235 | len = str.length; 236 | 237 | for ( i; i < len; i++ ) if ( str[i] != "" ) output += str[i][0]; //.toUpperCase(); 238 | return output; 239 | } 240 | 241 | var currentElement = element; 242 | 243 | function render(){ 244 | 245 | var imgData = generateAvatar( _str, _picture_resolution, _picture_resolution, _bgcolor, _textcolor, null); 246 | 247 | var html = ''; 248 | if (_wrapper) html += '
'; 249 | html += ''; 250 | if (_wrapper) html += '
'; 251 | 252 | var replacementElement = angular.element(html); 253 | currentElement.replaceWith(replacementElement); 254 | currentElement = replacementElement; 255 | } 256 | 257 | checkValues(); 258 | if ( _bind === true ){ 259 | 260 | scope.$watch( 'string', function ( value ) { 261 | 262 | checkValues(); 263 | render(); 264 | }); 265 | 266 | scope.$watch( 'initials', function ( value ) { 267 | 268 | checkValues(); 269 | render(); 270 | }); 271 | 272 | /* 273 | scope.$watch( 'bgcolor', function ( value ) { 274 | 275 | checkValues(); 276 | render(); 277 | }); 278 | */ 279 | 280 | } else { 281 | 282 | render(); 283 | } 284 | 285 | } 286 | }; 287 | }]); 288 | 289 | }()); 290 | -------------------------------------------------------------------------------- /dist/angular-avatar.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * angular-avatar 3 | * Angular Avatar is an AngularJS directive that generates a letter's avatar like Google does in several web apps. First letter of each word in a string will be used to generate the avatar. 4 | * @version v1.4.0 - 2020-10-26 5 | * @link https://github.com/ajsoriar/angular-avatar 6 | * @author Andres J. Soria R. 7 | * @license MIT License, http://www.opensource.org/licenses/MIT 8 | */ 9 | !function(){"use strict";var ngavatar=angular.module("ngAvatar",[]);ngavatar.directive("ngAvatar",[function(){return{restrict:"AE",replace:!0,scope:{initials:"@initials",width:"@width",bgcolor:"@bgColor",textColor:"@textColor",wrapper:"=wrapper",pictureResolution:"@pictureResolution",pixelated:"=pixelated",roundShape:"=roundShape","class":"@class",imgClass:"@imgClass",style:"@style",string:"@string",cornerRadius:"@cornerRadius",pictureFormat:"@pictureFormat",colorsPalette:"=colorsPalette",autoColor:"=autoColor",useFullStringForColors:"=useFullStringForColors",fontWeight:"@fontWeight",fontScale:"@fontScale",textShadow:"=textShadow",bind:"=bind",maxLength:"@maxLength",upperCase:"=upperCase"},link:function(scope,element,attrs){function checkValues(){if(void 0!=scope.bind&&(_bind=scope.bind),void 0!=scope.textColor&&(_textcolor=scope.textColor),void 0!=scope.pictureResolution&&(_picture_resolution=scope.pictureResolution),void 0!=scope.width&&(_long=scope.width),void 0!=scope.wrapper&&(_wrapper=scope.wrapper,_wrapper===!1&&(_img_width=_long)),void 0!=scope.pixelated&&(_pixelated=scope.pixelated,_pixelated===!0&&(_img_styling+="image-rendering:pixelated; image-rendering:-moz-crisp-edges;")),void 0!=scope.roundShape?(_roundShape=scope.roundShape,_roundShape&&(_wrapper_styling+="border-radius: "+_long+"px;")):void 0!=scope.cornerRadius&&(_corner_radius=scope.cornerRadius,_wrapper_styling+="border-radius: "+_corner_radius+"px;"),void 0!=scope["class"]&&(_extra_classes=scope["class"]),void 0!=scope.imgClass&&(_extra_img_classes=scope.imgClass),void 0!=scope.style&&(_extra_styles=scope.style),void 0!=scope.initials&&(_str=scope.initials),void 0!=scope.string&&(_str=getInitialsFromString(scope.string)),void 0!=scope.maxLength&&(_str=_str.substr(0,scope.maxLength)),"jpeg"===scope.pictureFormat&&(_picture_format="jpeg"),void 0!=scope.colorsPalette&&(_colors_palette=scope.colorsPalette),void 0!=scope.bgcolor)_bgcolor=scope.bgcolor;else if(void 0!=scope.autoColor&&(void 0!=scope.useFullStringForColors&&(_useFullStringForColors=scope.useFullStringForColors),_autoColor=scope.autoColor,_autoColor===!0))if(_useFullStringForColors===!0&&void 0!=scope.string){var i,colorIndex,lon=scope.string.length,charIndex=0;for(i=0;lon>i;i++)charIndex+=scope.string.charCodeAt(i);colorIndex=charIndex%_colors_palette.length,_bgcolor=_colors_palette[colorIndex]}else{var i,colorIndex,lon=_str.length,charIndex=0;for(i=0;lon>i;i++)charIndex+=_str.charCodeAt(i);colorIndex=charIndex%_colors_palette.length,_bgcolor=_colors_palette[colorIndex]}void 0!=scope.fontWeight&&(_font_weight=scope.fontWeight),void 0!=scope.fontScale&&(_font_scale=scope.fontScale),void 0!=scope.textShadow&&(_text_shadow=scope.textShadow),scope.upperCase===!0&&(_str=_str.toUpperCase())}function generateAvatar(name,w,h,bgcolor,textcolor,bgImage){var canvas,ctx,_font_size,WIDTH=256,HEIGHT=256;return void 0!=w&&w>0&&void 0!=h&&h>0&&(WIDTH=w,HEIGHT=h),canvas=document.createElement("canvas"),canvas.id="ngAvatar-"+Date.now(),canvas.width=WIDTH,canvas.height=HEIGHT,ctx=canvas.getContext("2d"),ctx.fillStyle=bgcolor,ctx.fillRect(0,0,WIDTH,HEIGHT),_font_size=WIDTH/(2/(_font_scale/100)),ctx.font=_font_weight+" "+_font_size+"px sans-serif",_text_shadow===!0&&(ctx.shadowColor="black",ctx.shadowOffsetX=0,ctx.shadowOffsetY=0,ctx.shadowBlur=5),ctx.textAlign="center",ctx.fillStyle=textcolor,ctx.fillText(_str,WIDTH/2,HEIGHT-HEIGHT/2+_font_size/3),canvas.toDataURL("image/"+_picture_format)}function getInitialsFromString(str){var output="",i=0,str=str.split(" "),len=str.length;for(i;len>i;i++)""!=str[i]&&(output+=str[i][0]);return output}function render(){var imgData=generateAvatar(_str,_picture_resolution,_picture_resolution,_bgcolor,_textcolor,null),html="";_wrapper&&(html+='
'),html+='',_wrapper&&(html+="
");var replacementElement=angular.element(html);currentElement.replaceWith(replacementElement),currentElement=replacementElement}var _long=45,_picture_resolution=256,_wrapper=!0,_str="",_bgcolor="#000",_textcolor="#fff",_pixelated=!1,_img_styling="vertical-align:top;",_roundShape=!1,_wrapper_styling="border-radius:0; display:block; overflow:hidden;",_extra_classes="",_extra_img_classes="",_extra_styles="",_corner_radius="0",_picture_format="png",_colors_palette=["#bdc3c7","#6f7b87","#2c3e50","#2f3193","#662d91","#922790","#ec2176","#ed1c24","#f36622","#f8941e","#fab70f","#fdde00","#d1d219","#8ec73f","#00a650","#00aa9c","#00adef","#0081cd","#005bab"],_autoColor=!1,_useFullStringForColors=!1,_font_weight=100,_font_scale=100,_text_shadow=!1,_bind=!1,_img_width="100%",currentElement=element;checkValues(),_bind===!0?(scope.$watch("string",function(value){checkValues(),render()}),scope.$watch("initials",function(value){checkValues(),render()})):render()}}}])}(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-avatar", 3 | "version": "1.4.0", 4 | "description": "Angular Avatar is a simple and lightweight AngularJS directive that generates a letter's avatar like Microsoft or Google do in their web apps. First letter of each word in a string or a group of initials will be used to generate the avatar. The image of the avatar will be rendered in an html img tag as a real png or jpeg. The image data can be retrieved using javascript to be stored in back-end giving you an initial profile picture in your web or mobile apps when the user does not upload one. Several angular atributes are available to configure the output: size, shape, resolution, colors, etc.", 5 | "main": "dist/angular-avatar.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/ajsoriar/angular-avatar.git" 15 | }, 16 | "keywords": [ 17 | "avatar", 18 | "angular-avatar", 19 | "letter avatar", 20 | "initials avatar", 21 | "angular avatar", 22 | "profile picture", 23 | "string avatar", 24 | "ng-avatar" 25 | ], 26 | "author": { 27 | "name": "Andres J. Soria R.", 28 | "email": "ajsoriar@gmail.com" 29 | }, 30 | "license": "MIT", 31 | "bugs": { 32 | "url": "https://github.com/ajsoriar/angular-avatar/issues" 33 | }, 34 | "homepage": "https://github.com/ajsoriar/angular-avatar#readme", 35 | "devDependencies": { 36 | "angular": "1.8.0", 37 | "angular-mocks": "1.4.5", 38 | "grunt": "*", 39 | "grunt-contrib-clean": "~0.5.0", 40 | "grunt-contrib-concat": "~0.3.0", 41 | "grunt-contrib-copy": "~0.5.0", 42 | "grunt-contrib-jshint": "0.7.2", 43 | "grunt-contrib-uglify": "~0.2.2", 44 | "grunt-contrib-watch": "*", 45 | "grunt-karma": "^0.12.0", 46 | "jasmine-core": "^2.4.1", 47 | "karma": "^0.13.3", 48 | "karma-jasmine": "^0.1.0", 49 | "karma-phantomjs-launcher": "^1.0.4", 50 | "phantomjs-prebuilt": "^2.1.16" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/angular-avatar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * angular-avatar 3 | * Angular Avatar is an AngularJS directive that generates a letter's avatar like Google does in several web apps. First letter of each word in a string will be used to generate the avatar. 4 | * @version v1.4.0 - 2020-10-26 5 | * @link https://github.com/ajsoriar/angular-avatar 6 | * @author Andres J. Soria R. 7 | * @license MIT License, http://www.opensource.org/licenses/MIT 8 | */ 9 | 10 | (function() { 11 | 12 | 'use strict'; 13 | 14 | var ngavatar = angular.module('ngAvatar', []); 15 | 16 | ngavatar.directive('ngAvatar', [function() { 17 | 18 | return { 19 | restrict: 'AE', 20 | replace: true, 21 | scope: { 22 | initials: '@initials', 23 | width: '@width', 24 | bgcolor: '@bgColor', 25 | textColor: '@textColor', 26 | wrapper: '=wrapper', 27 | pictureResolution: '@pictureResolution', 28 | pixelated: '=pixelated', 29 | roundShape: '=roundShape', 30 | class: '@class', 31 | imgClass: '@imgClass', 32 | style: '@style', 33 | string:'@string', 34 | cornerRadius: '@cornerRadius', 35 | pictureFormat: '@pictureFormat', 36 | colorsPalette: '=colorsPalette', 37 | autoColor: '=autoColor', 38 | useFullStringForColors: '=useFullStringForColors', 39 | fontWeight: '@fontWeight', 40 | fontScale: '@fontScale', 41 | textShadow: '=textShadow', 42 | bind: '=bind', 43 | maxLength: '@maxLength', 44 | upperCase: '=upperCase' 45 | }, 46 | link: function(scope, element, attrs) { 47 | 48 | var _long = 45, 49 | _picture_resolution = 256, 50 | _wrapper = true, 51 | _str = "", //scope.initials || "", 52 | _bgcolor = "#000", 53 | _textcolor = "#fff", 54 | _pixelated = false, 55 | _img_styling = "vertical-align:top;", 56 | _roundShape = false, 57 | _wrapper_styling = "border-radius:0; display:block; overflow:hidden;", 58 | _extra_classes = "", 59 | _extra_img_classes = "", 60 | _extra_styles = "", 61 | _corner_radius = "0", 62 | _picture_format = "png", 63 | _colors_palette = ["#bdc3c7","#6f7b87","#2c3e50","#2f3193","#662d91","#922790","#ec2176","#ed1c24","#f36622","#f8941e","#fab70f","#fdde00","#d1d219","#8ec73f","#00a650","#00aa9c","#00adef","#0081cd","#005bab"], 64 | _autoColor = false, 65 | _useFullStringForColors = false, 66 | _font_weight = 100, 67 | _font_scale = 100, 68 | _text_shadow = false, 69 | _bind = false, 70 | _img_width = "100%", 71 | _upperCase = false; 72 | 73 | function checkValues(){ 74 | 75 | if (scope.bind != undefined){ 76 | _bind = scope.bind; 77 | } 78 | 79 | if (scope.textColor != undefined) { 80 | _textcolor = scope.textColor; 81 | } 82 | 83 | if (scope.pictureResolution != undefined) { 84 | _picture_resolution = scope.pictureResolution; 85 | } 86 | 87 | if (scope.width != undefined) { 88 | _long = scope.width; 89 | } 90 | 91 | if (scope.wrapper != undefined) { 92 | _wrapper = scope.wrapper; 93 | if ( _wrapper === false ) { 94 | _img_width = _long; 95 | } 96 | } 97 | 98 | if (scope.pixelated != undefined) { 99 | _pixelated = scope.pixelated; 100 | if ( _pixelated === true ) { 101 | _img_styling += "image-rendering:pixelated; image-rendering:-moz-crisp-edges;"; 102 | } 103 | } 104 | 105 | if (scope.roundShape != undefined) { 106 | _roundShape = scope.roundShape; 107 | if ( _roundShape ) _wrapper_styling += "border-radius: "+ _long +"px;"; 108 | } else { 109 | if ( scope.cornerRadius != undefined ){ 110 | _corner_radius = scope.cornerRadius; 111 | _wrapper_styling += "border-radius: "+ _corner_radius +"px;"; 112 | } 113 | } 114 | 115 | if (scope.class != undefined) { 116 | _extra_classes = scope.class; 117 | } 118 | 119 | if (scope.imgClass != undefined) { 120 | _extra_img_classes = scope.imgClass; 121 | } 122 | 123 | if (scope.style != undefined) { 124 | _extra_styles = scope.style; 125 | } 126 | 127 | if (scope.initials != undefined) { 128 | _str = scope.initials; 129 | } 130 | 131 | if (scope.string != undefined) { 132 | _str = getInitialsFromString( scope.string ); 133 | } 134 | 135 | if (scope.maxLength != undefined) { 136 | _str = _str.substr(0, scope.maxLength ); 137 | } 138 | 139 | if (scope.pictureFormat === 'jpeg') { 140 | _picture_format = "jpeg"; 141 | } 142 | 143 | if (scope.colorsPalette != undefined) { 144 | _colors_palette = scope.colorsPalette; 145 | } 146 | 147 | if (scope.bgcolor != undefined) { 148 | _bgcolor = scope.bgcolor; 149 | } else { 150 | 151 | if (scope.autoColor != undefined) { 152 | if (scope.useFullStringForColors != undefined) { 153 | _useFullStringForColors = scope.useFullStringForColors; 154 | } 155 | 156 | _autoColor = scope.autoColor; 157 | if ( _autoColor === true ) { 158 | if (_useFullStringForColors === true && scope.string != undefined) { 159 | var i, lon = scope.string.length, charIndex=0,colorIndex; 160 | for(i=0; i 0) { 197 | if (h != undefined && h > 0) { 198 | WIDTH = w; 199 | HEIGHT = h; 200 | } 201 | } 202 | 203 | canvas = document.createElement('canvas'); 204 | canvas.id = "ngAvatar-" + Date.now(); 205 | canvas.width = WIDTH; 206 | canvas.height = HEIGHT; 207 | 208 | ctx = canvas.getContext('2d'); 209 | ctx.fillStyle = bgcolor; 210 | ctx.fillRect(0, 0, WIDTH, HEIGHT); 211 | 212 | _font_size = WIDTH / (2 / ( _font_scale / 100 )); 213 | ctx.font = _font_weight +" "+ _font_size +"px sans-serif"; 214 | 215 | if ( _text_shadow === true ) { 216 | ctx.shadowColor = "black"; 217 | ctx.shadowOffsetX = 0; 218 | ctx.shadowOffsetY = 0; 219 | ctx.shadowBlur = 5; 220 | } 221 | 222 | ctx.textAlign = "center"; 223 | ctx.fillStyle = textcolor; 224 | //ctx.fillText(_str, WIDTH / 2, HEIGHT - (HEIGHT / 2) + ( _font_size / 3) + 5 ); 225 | ctx.fillText( _str, WIDTH / 2, HEIGHT - (HEIGHT / 2) + ( _font_size / 3) ); 226 | 227 | return canvas.toDataURL("image/"+ _picture_format ); 228 | } 229 | 230 | function getInitialsFromString(str){ 231 | 232 | var output = "", 233 | i = 0, 234 | str = str.split(" "), 235 | len = str.length; 236 | 237 | for ( i; i < len; i++ ) if ( str[i] != "" ) output += str[i][0]; //.toUpperCase(); 238 | return output; 239 | } 240 | 241 | var currentElement = element; 242 | 243 | function render(){ 244 | 245 | var imgData = generateAvatar( _str, _picture_resolution, _picture_resolution, _bgcolor, _textcolor, null); 246 | 247 | var html = ''; 248 | if (_wrapper) html += '
'; 249 | html += ''; 250 | if (_wrapper) html += '
'; 251 | 252 | var replacementElement = angular.element(html); 253 | currentElement.replaceWith(replacementElement); 254 | currentElement = replacementElement; 255 | } 256 | 257 | checkValues(); 258 | if ( _bind === true ){ 259 | 260 | scope.$watch( 'string', function ( value ) { 261 | 262 | checkValues(); 263 | render(); 264 | }); 265 | 266 | scope.$watch( 'initials', function ( value ) { 267 | 268 | checkValues(); 269 | render(); 270 | }); 271 | 272 | /* 273 | scope.$watch( 'bgcolor', function ( value ) { 274 | 275 | checkValues(); 276 | render(); 277 | }); 278 | */ 279 | 280 | } else { 281 | 282 | render(); 283 | } 284 | 285 | } 286 | }; 287 | }]); 288 | 289 | }()); 290 | -------------------------------------------------------------------------------- /tests/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | 3 | module.exports = function(config) { 4 | 5 | 'use strict'; 6 | 7 | config.set({ 8 | 9 | // enable / disable watching file and executing tests whenever any file changes 10 | autoWatch: true, 11 | 12 | // base path, that will be used to resolve files and exclude 13 | basePath: '../', 14 | 15 | // testing framework to use (jasmine/mocha/qunit/...) 16 | // as well as any additional frameworks (requirejs/chai/sinon/...) 17 | frameworks: [ 18 | 'jasmine' 19 | ], 20 | 21 | files: [ 22 | 23 | //'bower_components/angular/angular.min.js', 24 | //'bower_components/angular-mocks/angular-mocks.js', 25 | 26 | /* We are testing now using version 1.4.5 of angular.js and angular-mocks.js. Version 1.5.0 and 1.5.5 break tests due to some kind of $injector:modulerr? error: Failed to instantiate module ng */ 27 | 28 | 'node_modules/angular/angular.js', 29 | 'node_modules/angular-mocks/angular-mocks.js', 30 | 31 | 'dist/angular-avatar.js', 32 | 'tests/*.js' 33 | ], 34 | 35 | exclude: [ ], 36 | 37 | browsers: [ 38 | 'PhantomJS' 39 | ], 40 | 41 | plugins: [ 42 | 'karma-phantomjs-launcher', 43 | 'karma-jasmine' 44 | ], 45 | 46 | junitReporter: { 47 | outputFile: 'tests_out/unit.xml', 48 | suite: 'unit' 49 | } 50 | 51 | }); 52 | }; 53 | -------------------------------------------------------------------------------- /tests/test-angular-avatar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 124 | 125 | -------------------------------------------------------------------------------- /tests/test-angular-avatar.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var myApp = angular.module('myApp', ['ngAvatar']); 4 | 5 | describe('Unit testing angular-avatar directive', function() { 6 | 7 | var $compile, $rootScope; 8 | 9 | // Load the myApp module, which contains the directive 10 | beforeEach(module('myApp')); 11 | 12 | // Store references to $rootScope and $compile 13 | // so they are available to all tests in this describe block 14 | beforeEach(inject(function(_$compile_, _$rootScope_) { 15 | 16 | // The injector unwraps the underscores (_) from around the parameter names when matching 17 | $compile = _$compile_; 18 | $rootScope = _$rootScope_; 19 | })); 20 | 21 | it('Replaces the element with the appropriate content. Display angular-avatar directive in the UI and rendering a png image', function() { 22 | 23 | //expect( 8 ).toBe(8); 24 | 25 | // Compile a piece of HTML containing the directive 26 | var element = $compile('
')($rootScope); 27 | $rootScope.$digest(); 28 | 29 | // Check that the compiled element contains the templated content 30 | expect(element.html()).toContain("data:image/png;base64"); // By default this directive will generate a png image. 31 | 32 | }); 33 | 34 | it('Replaces the element with the appropriate content. Display angular-avatar directive in the UI and rendering a jpeg image', function() { 35 | 36 | // Compile a piece of HTML containing the directive 37 | var element = $compile('
')($rootScope); 38 | $rootScope.$digest(); 39 | 40 | // Check that the compiled element contains the templated content 41 | expect(element.html()).toContain("data:image/jpeg;"); 42 | 43 | }); 44 | 45 | it('Generated IMG element sould have the class "image-class" ' , function() { 46 | 47 | // Compile a piece of HTML containing the directive 48 | var element = $compile('
')($rootScope); 49 | $rootScope.$digest(); 50 | 51 | // Check that the compiled element contains the templated content 52 | var str = element.html(); 53 | //console.log( "str: ", str ); 54 | expect(element.html()).toContain("image-class"); 55 | 56 | }); 57 | 58 | }); 59 | 60 | /* // trying executing a function inside directive's scope! 61 | describe('Unit testing angular-avatar II', function() { 62 | 63 | var $compile, $scope; 64 | var element2; 65 | 66 | // Load the myApp module, which contains the directive 67 | beforeEach(module('myApp')); 68 | 69 | // Store references to $rootScope and $compile 70 | // so they are available to all tests in this describe block 71 | //beforeEach(inject(function(_$compile_, _$rootScope_){ 72 | beforeEach(inject(function ($rootScope, _$compile_) { 73 | 74 | $scope = $rootScope.$new(); 75 | $compile = _$compile_; 76 | element2 = $compile('
')($scope); 77 | $scope.$digest(); 78 | 79 | })); 80 | 81 | describe('when page compiles the angular-avatar directive', function () { 82 | 83 | it('Replaces the element with the appropriate content', function() { 84 | 85 | // Check that the compiled element contains the templated content 86 | console.log("element2:", element2 ); 87 | console.log("element2.scope():", element2.scope() ); 88 | console.log("html generated by the directive:", element2.html() ); 89 | //console.log("element.scope().tryOut():", element.scope().tryOut() ); 90 | 91 | //$scope.$digest(); 92 | 93 | //expect( element2.scope().tryOut() ).toBe(8); 94 | expect( 8 ).toBe(8); 95 | 96 | }); 97 | 98 | }); 99 | 100 | }); 101 | */ 102 | 103 | --------------------------------------------------------------------------------