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. PermGen space Eclipse 终极解决方案

    1.选中项目右键 run or debug configurations... 2.在 VM arguments 加入  -Xms128m -Xmx512m -XX:PermSize=64M -XX: ...

  2. Select模型及tcp select模型

    参考:http://m.blog.csdn.net/article/details?id=51420015 一.套接字模式 套接字模式简单的决定了操作套接字时,Winsock函数是如何运转的.Wins ...

  3. [Android][Audio] audio_policy.conf文件分析

    不同的Android产品在音频的设计上通常是存在差异的,而这些差异可以同过Audio的配置文件audio_policy.conf来获得.在Android系统中音频配置文件存放路径有两处,存放地址可以从 ...

  4. Chapter 3 Start Caffe with MNIST Demo

    先从一个具体的例子来开始Caffe,以MNIST手写数据为例. 1.下载数据 下载mnist到caffe-master\data\mnist文件夹. THE MNIST DATABASE:Yann L ...

  5. 2 weekend110的HDFS的JAVA客户端编写 + filesystem设计思想总结

    HDFS的JAVA客户端编写  现在,我们来玩玩,在linux系统里,玩eclipse 或者, 即,更改图标,成功 这个,别慌.重新换个版本就好,有错误出错是好事. http://www.eclips ...

  6. 面试题收集——Java基础部分(一)

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/3641769.html 感谢! 1.一个".java"源文件中是否可以包括多个类(不是内部类) ...

  7. CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  8. ucos创建任务的一般方法

    一般说来,任务可在OSStart()启动任务调度之前来创建,也可在任务中创建,但是UC/OS有个规定:在调用OSStart()启动任务调度之前,必须创建了至少一个任务.因此一般习惯上,在OSStart ...

  9. Codeforces 687C. The Values You Can Make (dp)

    题目链接:http://codeforces.com/problemset/problem/687/C 题目大概说给n个各有价值的硬币,要从它们中选出若干个组合成面值k,而要求的是各个方案里这些选出的 ...

  10. Pyqt5.2.1生成的.ui文件转换成.py

    cmd C:\>pyuic5 ui文件路径 -o 要生成的py文件路径 如下: C:\>pyuic5 c:\python33\lib\site-packages\pyqt5\uic\log ...