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. Java核心_内省

    Java核心_内省 查看java的api,发现有一个包java.bean咦,这个包是干什么的呢,原来,它是用来操作JavaBean对象的! 一.内省操作①JavaBean:一种特殊的Java类无参构造 ...

  2. C#判断程序是由Windows服务启动还是用户启动

    在Windows系统做网络开发,很多时候都是使用Windows服务的模式,但在调度阶段,我们更多的是使用控制台的模式.在开发程序的时候,我们在Program的Main入口进行判断.最初开始使用Envi ...

  3. 分析fork后多进程对文件的共享

    fork函数是创建一个新的进程作为原进程的子进程,创建的子进程和父进程存在很多的相似性,首先父子进程的虚拟存储空间的用户空间是相同的,是将父进程的拷贝给子进程.同时父子进程对文件的操作是共享方式.因为 ...

  4. Python伪开发者对于搜狐云景的测评

    Python伪开发者对于搜狐云景的测评 本人是GAE和OpenShift的狂热爱好者,玩过各种国外PaaS.某次想搞个稍微复杂点的Python Web程序,需要比较好的网络传输速度,就试图找前PM(P ...

  5. HDU2648:Shopping(DKBR_hash)

    题目链接 题意: 给出n个字符串,接下来m天,每天每个字符串要增加对应的值,询问“memory”每天的排名 分析: 用hash表hash出每个字符串对应得值,然后放入二维数组(防止地址冲突),m天,输 ...

  6. poj 1581 A Contesting Decision

    题目大意:有四个题目,有某些队做题,写一个判断程序如:Stars 2 20 5 0 4 190 3 220Stars是队名,2是提交的次数,20是花费的时间,花费时间为0则说明题目提交错误,错误的忽略 ...

  7. HDU 1525 Euclid's Game （博弈）

    Euclid's Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  8. ProxyFactory的一个问题

    今天写了一段很简单的代码,但一直都有问题.代码如下. 接口定义 using System; using System.Collections.Generic; using System.Linq; u ...

  9. java反射工具类

    package com.yingchao.kgou.core; import java.lang.reflect.Field; import java.lang.reflect.InvocationT ...

  10. datatable把一个LIst的数据放入两个colum防止窜行的做法

    DataColumn objectOne = new DataColumn("objectOne", typeof(object)); dt.Columns.Add(objectO ...