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 ...
随机推荐
- xamarin.android之 Android 4.4+ 获取图片真实路径
Android 4.4以下 选择图片是可以获取到图片路径的.高于Android 4.4获取图片路径只是获取到一个图片编号. 所以需要针对Android版本进行路径解析: #region 高于 v4.4 ...
- 迅为4412开发板支持AVIN视频输入/AV监控摄像头输入模块
AVIN模块(iTOP-4412开发板专用) 产品介绍:视频输入/AV监控摄像头输入模块: 该模块及配套的软件为开发视频采集.监控.车载后视等产品提供了很好的参考. iTOP-4412 开发平台 开发 ...
- 【分享】iTOP-4412开发板使用之初体验[多图]
近期入手了4412开发板,配的7寸屏和WIFI模块,GPS模块,下面晒个照片介绍一下,手机拍摄图片有点模糊,实物很精致,是我所见过最好的板子.b(￣▽￣)d 预装的Android4.0.3系统,5点以 ...
- uva 1471 defence lines——yhx
After the last war devastated your country, you - as the king of the land of Ardenia - decided it wa ...
- 如何利用ZBrush中的DynaMesh创建身体（二）
之前的ZBrush教程我们在了解了人体比例和结构的前提下,使用ZBrush®软件中的Append功能和InsertSphere笔刷添加躯干.本讲将参照图片继续对“亡灵僵尸”的形体结构进行细致刻画和使用 ...
- Django中的syncdb命令
从官方文档的意思来看,现在他已经成为migrate命令的同义词了,和migrate命令有相同的作用. Deprecated since version 1.7: This command has be ...
- UVALive 6168 Fat Ninjas --二分小数+搜索
题意:一个NxN的网格地板,有一些激光束从天花板垂直射向地面的某个网格,一个圆要安全地从左走到右,不碰到上边界,下边界以及激光束,问这个圆的直径最大能达到多大. 分析:可以二分直径,关键在check函 ...
- scroll滚动条插件初始化问题
一种特殊场景下是滚动条容器先隐藏,点击某个东西后显示出来.然后实例化滚动条.实例 js: var flag = true; document.getElementById('btn1').onclic ...
- PHP 魔术引号
1.魔术引号的作用是什么? 魔术引号设计的初衷是为了让从数据库或文件中读取数据和从请求中接收参数时,对单引号.双引号.反斜线.NULL加上一个一个反斜线进行转义,这个的作用跟addslashes( ...
- 如何在.net4.0中使用.net4.5的async/await
推荐文章: http://www.cnblogs.com/hj4444/p/3857771.html http://www.cnblogs.com/dozer/archive/2012/03/06/a ...