[AngularJS] Hijacking Existing HTML Attributes with Angular Directives
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的更多相关文章
- [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 ...
- [AngularJS] Using Services in Angular Directives
Directives have dependencies too, and you can use dependency injection to provide services for your ...
- AngularJS源码解析1：angular自启动过程
angularJS加载进来后,会有一个立即执行函数调用,在源代码的最下面是angular初始化的地方.代码展示: bindJQuery(); publishExternalAPI(angular); ...
- [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 ...
- [AngularJS 2 实践 一]My First Angular App
最近一直在看关于AngularJS 2的资料,查看了网上和官网很多资料,接下来就根据官网教程步骤一步步搭建我的第一个Angular App AngularJS 2说明请参考:http://cnodej ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- angularjs探秘<三> 控制器controller及angular项目结构
先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...
- angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引 公司新项目开发中,首页要做个楼层导航效果(如下图),要求能点击图标对应跳到楼层即可,因为不需要跳转过度动画,也要求最好别用JQ,想着原生js操作dom计算top的兼容性,想着用锚点实现算 ...
- 一个全栈Web/移动App开发学习路径
HTML.CSS 和 JavaScript 网页开发的基本元素,包括HTML.CSS个JavaScript.本课程完全适合零基础的同学,当然如果你有相关开发经验更好.在课程开始呢,我们先探索与讨论HT ...
随机推荐
- 数往知来 三层架构 <十四>
三层架构_1 一.三层 就是把程序的各个部分都分离,尽量的底耦合,做到分工明确.责任明确 第一层:Dal 数据访问层 第二层 :Bll 业务逻辑判断层 第三层: UI 界面显示层 比如说数据 ...
- 两个队列+k叉哈夫曼树 HDU 5884
// 两个队列+k叉哈夫曼树 HDU 5884 // camp题解: // 题意:nn个有序序列的归并排序.每次可以选择不超过kk个序列进行合并,合并代价为这些序列的长度和.总的合并代价不能超过TT, ...
- 一款APP从设计稿到切图过程全方位揭秘 Mark
纯干货!一款APP从设计稿到切图过程全方位揭秘 @BAT_LCK:我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧.公司不 ...
- 【整理】JavaEE基本框架（Struts2+Spring+MyBatis三层，Struts MVC）之间的关系
#[整理]JavaEE基本框架(Struts2+Spring+MyBatis三层,Struts MVC)之间的关系  { try { URL url = new URL("http://www.webservicex.net/globalweather.as ...
- 用PyInstaller把Python代码打包成单个独立的exe可执行文件
之前就想要把自己的BlogsToWordpress打开成exe了.一直没去弄. 又看到有人提到python打开成exe的问题. 所以打算现在就去试试. 注:此处之所有选用BlogsToWordpres ...
- 51Nod 1405 树的距离之和 (树dp)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1405 中文题面不解释了,两次dfs,第一次自下向上,第二次自上 ...