Angular overrides quite a few existing HTML elements and attributes. This can be a useful technique in our own applications. We will build a directive that adds additional functionality to the src property of an <img>.

Javascript:

/**

 * Created by Answer1215 on 12/8/2014.

 */

angular.module('app', []).directive('src', function () {

    var URL_RE = /^http:\/\/[^\/]*/;

    var HTTP_RE = /^(http|https):\/\//;

    return function (scope, element, attrs) {

        var context = {url: attrs.src.match(URL_RE)[0]};

        context.domain = context.url.replace(HTTP_RE, '');

        /*

        * Object {url: "http://fursealworld.com", domain: "fursealworld.com"} app.js:11

         Object {url: "http://resources.news.com.au", domain: "resources.news.com.au"} app.js:11

         Object {url: "http://www.hdwallpaperscool.com", domain: "www.hdwallpaperscool.com"}

        * */

        var templateFn = _.template('<a href="<%= url %>" target="_blank">Photo courtesy of <%= domain %></a>');

        element.css({border: "2px solid grey"});

        element.after(templateFn(context));

    };

});

HTML:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Hijacking HTML Attributes</title>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css">

    <link rel="stylesheet" href="./main.css">

</head>

<body>

<div class="container-fluid" ng-app="app">

    <div class="row">

        <div class="col-xs-4">

            <img src="http://fursealworld.com/wp-content/uploads/2013/03/1280BabyHarpSeal11.jpg"/>

        </div>

        <div class="col-xs-4">

            <img src="http://resources.news.com.au/files/2012/01/13/1226243/386315-harp-seal-1.jpg"/>

        </div>

        <div class="col-xs-4">

            <img src="http://www.hdwallpaperscool.com/wp-content/uploads/2014/10/baby-seal-widescreen-wallpaper-for-background-free.jpg"/>

        </div>

    </div>

</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>

<script src="app.js"></script>

</body>

</html>

[AngularJS] Hijacking Existing HTML Attributes with Angular Directives的更多相关文章

  1. [AngularJS] Consistency between ui-router states and Angular directives

    ui-router's states and AngularJS directives have much in common. Let's explores the similarities bet ...

  2. [AngularJS] Using Services in Angular Directives

    Directives have dependencies too, and you can use dependency injection to provide services for your ...

  3. AngularJS源码解析1：angular自启动过程

    angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); ...

  4. [RxJS + AngularJS] Sync Requests with RxJS and Angular

    When you implement a search bar, the user can make several different queries in a row. With a Promis ...

  5. [AngularJS 2 实践 一]My First Angular App

    最近一直在看关于AngularJS 2的资料,查看了网上和官网很多资料,接下来就根据官网教程步骤一步步搭建我的第一个Angular App AngularJS 2说明请参考:http://cnodej ...

  6. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  7. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  8. angularjs中使用锚点，angular路由导致锚点失效的两种解决方案

     壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...

  9. 一个全栈Web/移动App开发学习路径

    HTML.CSS 和 JavaScript 网页开发的基本元素,包括HTML.CSS个JavaScript.本课程完全适合零基础的同学,当然如果你有相关开发经验更好.在课程开始呢,我们先探索与讨论HT ...

随机推荐

  1. ArcGIS API Reference & Flex API samples学习进度备忘

    书签:跳过:另外跳过的内容有待跟进 __________________学习资源: 1.http://help.arcgis.com/en/webapi/flex/apiref/index.html ...

  2. Windows下安装GTK+

    Step 1:到GTK官方网站上下载安装包.有32位的和64位,64位的有这句: Note that these 64-bit packages are experimental. Binary co ...

  3. 自定义延时查询控件---valen

    当查询已经成标配 查询是已成为每个应用常用的功能,也正是这样前端后对查询的设计需求也日益增加,本文针对前端(Android端)查询控件做一个例子: 控件设计与逻辑 产品的设计UI图; 要达到如下 1| ...

  4. Jquery 操作页面中iframe自动跟随窗口大小变化，而页面不出现滚动条，只在iframe内部出滚动条

    很多时候大家需要iframe自适应所加载的页面高度而不要iframe滚动条,但是这次我需要的是页面不需要滚动条而iframe要滚动条,且iframe自动跟随窗口大小变化.自适应页面大小.下面是代码,下 ...

  5. Linux下的paste合并命令详解

    paste单词意思是粘贴.该命令主要用来将多个文件的内容合并,与cut命令完成的功能刚好相反. 粘贴两个不同来源的数据时,首先需将其分类,并确保两个文件行数相同.paste将按行将不同文件行信息放在一 ...

  6. spring mvc中的valid

    当你希望在spring mvc中直接校验表单参数时,你可以采用如下操作: 声明Validator的方式: 1.为每一个Controller声明一个Validator @Controller publi ...

  7. TcxDBTreeList导出EXCEL

    function ExportExcel(tree: TcxDBTreeList;  const fileName: string = '1.xls'): Boolean;var  sd: TSave ...

  8. UVa 11536 Smallest Sub-Array (水题， 滑动窗口)

    题意:给定 n 个由0~m-1的整数组成的序列,输入 k ,问你找出连续的最短序列,使得这个序列含有1-k的所有整数. 析:这个题,很简单么,只要从头开始扫一遍就OK,时间复杂度为O(n). 代码如下 ...

  9. EasyUI_tree根据数据库数据生成树形结构JSON格式

    @Entitypublic class PubComp { @Id private String aguid; // 菜单ID private String pguid; // 父菜单 private ...

  10. mongo常用命令

    1.由于mongo没有关系型数据库常用,一些基础的命令容易忘记 db.table.update( { "_id" : xxx } , { $set : { "field1 ...