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. latex公式中的空格如何表示

    两个quad空格 a \qquad b 两个m的宽度 quad空格 a \quad b 一个m的宽度 大空格 a\ b 1/3m宽度 中等空格 a\;b 2/7m宽度 小空格 a\,b 1/6m宽度 ...

  2. extern "c" 的作用

    作用:实现C和C++混合编程. 原理:C和C++编译器编译之后,函数名会编译成不同的名字,链接阶段名字查找会找不到目标,后面实例中会详解. 用法:①.c文件中定义的函数,.cpp文件要调用时,该.cp ...

  3. To follow the path

    look to the master,    follow the master,    walk with the master,    see through the master,    bec ...

  4. 二叉树单色路径最长&amp;&amp;穿珠子

    对树的操作,特别理解递归的好处. //对于一棵由黑白点组成的二叉树,我们需要找到其中最长的单色简单路径,其中简单路径的定义是从树上的某点开始沿树边走不重复的点到树上的 //另一点结束而形成的路径,而路 ...

  5. 二叉树单色路径最长&&穿珠子

    对树的操作,特别理解递归的好处. //对于一棵由黑白点组成的二叉树,我们需要找到其中最长的单色简单路径,其中简单路径的定义是从树上的某点开始沿树边走不重复的点到树上的 //另一点结束而形成的路径,而路 ...

  6. AI线性图标教程-转起

  7. Hive QL

    转自http://www.alidata.org/archives/581 Hive 的官方文档中对查询语言有了很详细的描述,请参考:http://wiki.apache.org/hadoop/Hiv ...

  8. 50+ 响应式的Prestashop电商主题

    PrestaShop是一款针对web2.0设计的全功能.跨平台的免费开源电子商务解决方案,自08年1.0版本发布,短短两年时间,发展迅速,全球已超过四万家网店采用Prestashop进行部署.Pres ...

  9. 初识Rest、JSR、JCP、JAX-RS及Jersey

    REST:即表述性状态传递(英文:Representational State Transfer,简称REST)是一种分布式应用的架构风格,也是一种大流量分布式应用的设计方法论. JSR是Java S ...

  10. poj 2196 Specialized Four-Digit Numbers

    如果一个数字 十进制的各位数的和 == 十六进制的各位数的和 == 十二进制的各位数的和,则输出,从2992到9999 #include <cstdio> int toDD(int n) ...