angular的GitHub Repository Directive Example学习
angular的GitHub Repository Directive Example学习
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>GitHub Repository Directive Example</title> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<body>
<h2>Demo</h2>
<div>
<a href="https://github.com/jquery/jquery" github-repo>
jQuery - New Wave JavaScript
</a>
<a href="https://github.com/angular/angular.js" github-repo>
AngularJS
</a>
</div>
<div appVersion>1.0.1</div>
<script>
//使用严格模式;
'use strict'; var myApp = angular.module('myApp', []); /* Directives */ myApp.directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]); //依赖http服务 , $document在这里面没有用到;
myApp.directive('githubRepo', ['$http', '$document', function($http, $document) {
return {
restrict: 'A',
//没有对dom进行绑定link,所以任何时候修改DOM都行;
link: function(scope, elm, attrs) {
var address = attrs.href.slice(attrs.href.indexOf('github.com/') + 11); /*
没结果的返回的东西;
JSON_CALLBACK({
"meta": {
"X-RateLimit-Limit": "60",
"X-RateLimit-Remaining": "59",
"X-RateLimit-Reset": "1418877113",
"X-GitHub-Media-Type": "github.v3",
"status": 404
},
"data": {
"message": "Not Found",
"documentation_url": "https://developer.github.com/v3"
}
});
有结果的返回(太长了,自己试一试):
https://api.github.com/repos/jquery/jquery?callback=JSON_CALLBACK
*/
$http.jsonp('https://api.github.com/repos/' + address + '?callback=JSON_CALLBACK').success(function(data, status)
{
var repoInfo = data.data;
var formattedRepoName = repoInfo.full_name.replace('/', '_');
var container = angular.element('<div/>'); var repoContent;
if (repoInfo.description && repoInfo.homepage) {
repoContent = '<p>' + repoInfo.description + '</p><p class="homepage"><strong><a href="' + repoInfo.homepage + '">' + repoInfo.homepage + '</a></strong></p>';
} else if (repoInfo.description) {
repoContent = '<p>' + repoInfo.description + '</p>';
} else if (repoInfo.homepage) {
repoContent = '<p class="homepage"><strong><a href="' + repoInfo.homepage + '">' + repoInfo.homepage + '</a></strong></p>';
} else {
repoContent = '<p class="none">No description or homepage.</p>';
} container.addClass('reposidget');
container.html('<div class="reposidget-header"><h2><a href="https://github.com/' + repoInfo.owner.login + '">' + repoInfo.owner.login + '</a> / <strong><a href="' + repoInfo.html_url + '">' + repoInfo.name + '</a></strong></h2></div><div class="reposidget-content">' + repoContent + '</div><div class="reposidget-footer"><span class="social"><span class="star">' + repoInfo.watchers_count + '</span><span class="fork">' + repoInfo.forks_count + '</span></span><a href="' + repoInfo.html_url + '/zipball/' + repoInfo.master_branch + '">Download as zip</a></div>'); //把新建的DOM节点添加到elm后面;
elm.after(container);
elm.css('display', 'none');
});
}
};
}]);
</script>
<style type="text/css">
a.reposidget {
color: #4183c4;
text-decoration: none;
display: block;
clear: both;
margin: 10px 0;
} div.reposidget {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
max-width: 400px;
color: #666;
display: block;
clear: both;
margin: 20px 0;
} .reposidget a {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
color: #4183c4;
text-decoration: none;
} .reposidget-header {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
height: 36px;
line-height: 36px;
background: #fafafa;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));
background: -webkit-linear-gradient(top, #fafafa, #eaeaea);
background: -moz-linear-gradient(top, #fafafa, #eaeaea);
background: -ms-linear-gradient(top, #fafafa, #eaeaea);
background: -o-linear-gradient(top, #fafafa, #eaeaea);
background: linear-gradient(top, #fafafa, #eaeaea);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#eaeaea')";
border: 1px solid #eaeaea;
border-radius: 3px 3px 0 0;
padding: 0 10px 0 0;
overflow: hidden;
text-overflow: ellipsis;
} .reposidget-header h2 {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
margin: 0;
padding: 0 0 0 32px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAMAAADAi10DAAAABlBMVEWioqL///8ciDJAAAAAAnRSTlP/AOW3MEoAAAAxSURBVBjTY2BkQAMYAnAJJAAXQgjjExrKGokBjIwYGqE0XrOwhD1cNcI0nEIwBggAALWWANXTTzTsAAAAAElFTkSuQmCC') 7px 7px no-repeat;
} .reposidget-header h2 strong {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
font-weight: bold;
} .reposidget-content {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
padding: 10px 10px 8px 10px;
background: #fafafa;
border: 1px solid #ddd;
box-shadow: inset 0 1px 1px #fff;
} .reposidget-content p {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
margin: 0;
font-size: 13px;
line-height: 21px;
} .reposidget-content p.homepage {
text-overflow: ellipsis;
overflow: hidden;
} .reposidget-content p.none {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
font-style: italic;
color: #999;
} .reposidget-content strong {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
line-height: 1.25 !important;
} .reposidget-content a:hover {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
text-decoration: underline;
} .reposidget-footer {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
height: 46px;
background: #fcfcfc;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 3px 3px;
padding: 0 10px;
} .reposidget-footer .social {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
display: inline-block;
height: 26px;
margin: 10px 0 0 0;
} .reposidget-footer .social span {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
vertical-align: top;
margin: 0;
float: none;
border: 1px solid #ddd;
height: 24px;
line-height: 24px;
display: inline-block;
color: #666;
font-size: 12px;
font-weight: bold;
padding: 0 5px 0 24px;
} .reposidget-footer .star {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
border-radius: 3px 0 0 3px;
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAwUlEQVQoz42SMQ6EIBREuROX0BOY2GzcmmaLTTBxvYM9jVyEC0jJTZTYsQ4R4hKIW7xk/DMT5SNxzpEUa23X9/0IoHMZkhtqrd9VVY0A+ra4rusTcM5HSqkHOsx/imEIlmXxbwqlAGbwrlkihBjS4B3okH3fH0op/m8JWXTiFo0xr7quiwV4yIQtx8Nu29bN81z8bHjIZLd63WYKvOJ1MMaKRXjFYtM0PiSlHI7nFkBjBq9YnKbpg/D1Nzt1e3ox+wXh13nYaOboUAAAAABJRU5ErkJggg==') 6px 6px no-repeat;
} .reposidget-footer .fork {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
border-left: none !important;
border-radius: 0 3px 3px 0;
background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAA8UlEQVQoz4WRTQqDMBSEXXbRu0gJdCH0AO66KP6cQ4pUJLcSFDyBC0VQ/EHPYt88NKhUu5gwTPJlwos2TZOWJIknhJAQPLIjaX3f323blnVds+CRnQHCcRxZFAULnrILNuM4fi/N8AxgSdNUbZD3kbVte903U2YwMI6j7rquhMjzc6jFQFue56y5WTDQdd0dAUT+tryX2j6rZk89iaoUQF4BwzAYSzN5/S/g+z7fHgSBVFNaA0v9WqZpyrIsnxugaZqfAA5XVfXa/AOWKIrUWMMwlKc/TTc8LMvazBvZIUCHeN5ZlrHgkR0C87y9/byP9AVjF5fB2Yv1MAAAAABJRU5ErkJggg==') 7px 5px no-repeat;
} .reposidget-footer a {
font-family: helvetica, arial, freesans, clean, sans-serif !important;
float: right;
margin: 6px 0 0 0;
display: inline-block;
padding: 8px 15px;
line-height: 1.25;
font-size: 12px;
font-weight: bold;
color: #666;
text-shadow: rgba(255, 255, 255, 0.898438) 0px 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#e5e5e5));
background: -webkit-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -moz-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -ms-linear-gradient(top, #f5f5f5, #e5e5e5);
background: -o-linear-gradient(top, #f5f5f5, #e5e5e5);
background: linear-gradient(top, #f5f5f5, #e5e5e5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5')";
border-radius: 3px;
border: 1px solid #ddd;
border-bottom-color: #bbb;
box-shadow: rgba(0, 0, 0, 0.0976563) 0px 1px 3px;
-webkit-user-select: none;
} .reposidget-footer a:hover {
color: #337797;
text-shadow: rgba(255, 255, 255, 0.898438) 0px 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f7fa), to(#d8eaf2));
background: -webkit-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -moz-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -ms-linear-gradient(top, #f0f7fa, #d8eaf2);
background: -o-linear-gradient(top, #f0f7fa, #d8eaf2);
background: linear-gradient(top, #f0f7fa, #d8eaf2);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f7fa', endColorstr='#d8eaf2')";
border: 1px solid #cbe3ee;
border-bottom-color: #97c7dd;
} .reposidget-footer a:active {
color: #fff;
text-shadow: rgba(0, 0, 0, 0.296875) 0px -1px 0px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#0770a0), to(#0ca6dd));
background: -webkit-linear-gradient(top, #0770a0, #0ca6dd);
background: -moz-linear-gradient(top, #0770a0, #0ca6dd);
background: -ms-linear-gradient(top, #0770a0, #0ca6dd);
background: -o-linear-gradient(top, #0770a0, #0ca6dd);
background: linear-gradient(top, #0770a0, #0ca6dd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0770a0', endColorstr='#0ca6dd')";
border: 1px solid #2a65a0;
border-bottom-color: #0770a0;
}
</style>
</body>
</html>
angular的GitHub Repository Directive Example学习的更多相关文章
- 强烈推荐 GitHub 上值得前端学习的开源实战项目
强烈推荐 GitHub 上值得前端学习的开源实战项目. Vue.js vue-element-admin 是一个后台前端解决方案,它基于和 element-ui 实现 基于 iView 的 Vue 2 ...
- 一个简单的例子学会github repository的webhook
github的webhook是个有用的功能,允许开发人员指定一个服务器的url.当开发者对github仓库施加操作,比如提交代码,创建issue时,github网站会自动向该url指定的服务器推送事件 ...
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- angular自定义指令－directive
Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. v ...
- 给你的 GitHub Repository 加上 sponsor 按钮
「本文微信公众号 AndroidTraveler 首发」 背景 其实之前 GitHub 就已经说过要给开源的开发者提供赞助支持. 当你进入 GitHub 主页时,你会在右边发现一个 Tips. 点击进 ...
- github上热门深度学习项目
github上热门深度学习项目 项目名 Stars 描述 TensorFlow 29622 使用数据流图进行可扩展机器学习的计算. Caffe 11799 Caffe:深度学习的快速开放框架. [Ne ...
- -_-#【Angular】自定义指令directive
AngularJS学习笔记 <!DOCTYPE html> <html ng-app="Demo"> <head> <meta chars ...
- 个人github链接及git学习心得总结
个人github链接 https://www.github.com/liangjianming/test git学习心得总结 git是一个快速,开源,分布式的版本控制系统. GitHub是一个基于w ...
随机推荐
- GMT与UTC简介
一.简介 许多人都知道两地时间表简称为GMT或UTC,而世界时区表则通称为World Time ,那么GMT与UTC的实质原意又是为何?世界时区又是怎么区分的?面盘上密密麻麻的英文单字代表着什么意义与 ...
- KEIL与ADS1.2共存
出现的问题: 原来电脑已经安装了ADS1.2.现在安装keil5编译一个32位新唐单片机程序时,出现了如下错误: Error: L6411E: No compatible library exists ...
- Rhythmbox中文乱码问题的解决
Rhythmbox中文乱码问题的解决 Rhythmbox是Ubuntu自带的一款很优秀的音乐播放器,但是在处理中文时却不太友好,导入歌曲时中文会变成乱码 这个问题也是很好解决的. ** 1.Ctrl+ ...
- Maven使用笔记，错误Failure to Transfer后处理
当有未更新成功的项,M3会以后缀为.lastUpdated保存未更新成功的项 执行下面的操作可清楚这些项 Unixfind ~/.m2 -name "*.lastUpdated" ...
- java在url传输前更改字符编码
几种方式 1. String s = "sds"; s = new String(data_id.getBytes("UTF-8")); 2. 使用get请求 ...
- 2014 Super Training #1 C Ice-sugar Gourd 模拟，扫描线
原题 HDU 3363 http://acm.hdu.edu.cn/showproblem.php?pid=3363 给你一个串,串中有H跟T两种字符,然后切任意刀,使得能把H跟T各自分为原来的一半. ...
- flex+AS3编程规范
flex+AS3编程规范 Flex+AS3编码规范 http://www.cnblogs.com/jiahuafu/ 1. 缩写: 尽量避免使用缩写,使用缩写时尽量和Flex保持一致.但要记住一 ...
- McCall的软件质量模型
McCall等认为,特性是软件质量的反映,软件属性可用做评价准则,定量化地度量软件属性可知软件质量的优劣 McCall认为软件的质量模型应该包括 产品的修正.产品的转移,产品的运行 而产品的修正又包括 ...
- java 19 -14 File类的判断并输出案例
package zl_file; import java.io.File; import java.io.FilenameFilter; /* 需求: 判断E盘目录下是否有后缀名为.jpg的文件,如果 ...
- C# HttpWebRequest 绝技 转至 http://www.sufeinet.com/
转至: 在线测试工具http://www.sufeinet.com/thread-3690-1-1.htmlc# HttpWebRequest与HttpWebResponse 绝技 如果你想做一 ...