angular-gravatar

Angular.JS directive for gravatar images

angular-gravatar ==============

Angular.JS directive for Gravatar.

Copyright (C) 2015, Sebastian Wallin sebastian.wallin@gmail.com

Requirements

Install with Bower

bower install angular-gravatar

Install with NPM

npm install angular-gravatar

Usage

Include angular-gravatar.js in your application.

<script src="bower_components/angular-gravatar/build/angular-gravatar.js"></script>

Add the module ui.gravatar as a dependency to your app:

var app = angular.module('app', ['ui.gravatar']);

Then use the directive on an image tag and it will set the correct src attribute for you.

<!-- using a scope variable //-->
<img gravatar-src="user.email" gravatar-size="100">
<!-- or a string directly //-->
<img gravatar-src="'sebastian.wallin@gmail.com'" gravatar-size="100">

If the source is already an MD5 hash, it will be left untouched (thanks @thewarpaint)

Binding Once

If you know that the source is not going to change, you can use the gravatar-src-once instead:

<img gravatar-src-once="user.email">

Note: this directive will watch for a non falsy value and then stop watching.

Configuration

The options that are sent along to Gravatar can be set either directly in the directive as seen above with size or configured as default parameters via the gravatarServiceProvider:

angular.module('ui.gravatar').config([
  'gravatarServiceProvider', function(gravatarServiceProvider) {
    gravatarServiceProvider.defaults = {
      size     : 100,
      "default": 'mm'  // Mystery man as default for missing avatars
    };

    // Use https endpoint
    gravatarServiceProvider.secure = true;

    // Force protocol
    gravatarServiceProvider.protocol = 'my-protocol';

    // Override URL generating function
    gravatarServiceProvider.urlFunc = function(options) {
      // Code to generate custom URL
    };
  }
]);

Note that by default, no explicit protocol is set. This means that the image will use the protocol with which the page is loaded. For example; if the page url is http://www.example.com the image will be loaded over http, but if the page url is https://www.example.com the image will be loaded over https.

Anyway, you can force the protocol you want (for https use secure = true instead of protocol = 'https' because gravatar url differs for secure/no secure). For example, if you are developing a mobile app with Cordova you should use http. Otherwise directive will use file protocol and fail.

All the available options can be seen over at the Gravatar docs for image requests

License

MIT

Contributors

Repository

https://github.com/wallin/angular-gravatar


上一篇:angular-confirm
下一篇:jquery-bgiframe

相关推荐

  • 高级 Angular 组件模式 (3b)

    03-b Enhance Components with Directives 原文: Enhance Components with Directives Kent C. Dodds的第四篇文章...

    3 年前
  • 高级 Angular 组件模式 (3a)

    03-a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components U...

    3 年前
  • 问道Angular——Angular设置别名alias

    设置别名   在根目录下tsconfig.json中添加baseUrl和paths { "compilerOptions": { "baseUrl": "src", "paths"...

    2 年前
  • 问道Angular——Angular刷新当前页面

    onSameUrlNavigation   从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、   有两个值'reload'和'ignore'。

    2 年前
  • 问道Angular——APP_INITIALIZER

    概述   有时需要在加载应用之前运行代码,有时希望暂停应用初始化,直到完成某些限制之后再执行。APP_INITIALIZER令牌可以完成这项操作。 APP_INITIALIZER是一个函数,在应用改程...

    2 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    1 年前
  • 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 尽管 Web开发的典型应用场景除了将服务器用作平台、浏览器用作客户端之外,几乎很少活跃于其他业务领域,但...

    1 年前
  • 通过框架设计理解react、angular、vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以...

    1 年前
  • 通过框架设计理解React、Angular、Vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以...

    1 年前
  • 走进AngularJs之过滤器(filter)详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。

    4 年前

官方社区

扫码加入 JavaScript 社区