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 ...
随机推荐
- 探索 OpenStack 之（9）：深入块存储服务Cinder （功能篇）
继研究了Neutron之后,继续Nova的外围研究之旅.本站是研究块存储服务Cinder. 0.验证环境 环境包括: 1.一个controller节点,运行nova-api, nova-schedul ...
- OpenStack在线迁移
OpenStack迁移需要将虚拟机创建运行在共享存储上才可以进行迁移. 一.配置共享存储 1.环境 OpenStack三个节点icehouse-gre模式部署一文部署了的OpenStack环境. IP ...
- OpenStack overview 笔记
Example architecture example architecture 至少需要两个节点启动一个虚拟机或者实例.可选的服务,例如Block storage和Object storage需要 ...
- poj-3739. Special Squares(二维前缀和)
题目链接: I. Special Squares There are some points and lines parellel to x-axis or y-axis on the plane. ...
- swfobject.js视频播放插件
在网页中经常会用到视频播放的功能,下面介绍一下swfobject.js的视频播放应用:html代码结构: <div id="video_content"></di ...
- TopCoder SRM 633 Div.2 500 Jumping
题意:给一个点(x,y),给一些步长delta1,delta2...deltaN,问从(0,0)严格按照步长走完N步后能否正好到达(x,y)点. 解法:其实就是判断这些线段和(0,0)-(x,y)这条 ...
- mysql创建表
说明:此文件包含了blog数据库中建立所有的表的Mysql语句. 在sql语句中注意“约束的概念": 1.实体完整性约束(主键--唯一且非空) primary key() 违约处理:No a ...
- Linux 常用基本命令
这两天有俩哥们问了我linux的事,问我在工作中需不需要用到,需不需要学会 一个是工作1年不到的,我跟他说,建议你学学,在以后肯定是要用到的,虽然用到的机会不多,但是会总比不会好 另一个是工作6年的, ...
- Colorable Fantasy UI
Colorable Fantasy UI URL:https://www.assetstore.unity3d.com/#/content/7563 环境要求 Requires Unity 4.0.1 ...
- 《深入.NET平台和C#编程》--题型释疑
本题考查抽象类和抽象方法的概念.定义抽象类或抽象方法使用的是abstract关键字,抽象类中可以包含抽象方法和非抽象方法,但抽象方法必须定义在抽象类中,抽象方法定义时只需要定义方法头,不可以定义方法体 ...