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 ...
随机推荐
- mysql启动不成功显示The server quit without updating PID file的解决方法
上午在编译安装mysql的时候 就出现标题中的错误,经实践在第二步操作后启动成功,参考链接 链接http://linuxadministrator.pro/blog/?p=225 You may fa ...
- gre网络细节
一.OpenStack网络设备的命名规律: 1.TenantA的router和Linux网络命名空间qrouter名称 root@controller:~# neutron --os-tenant-n ...
- gnuplot Python API
源文件 #!/usr/bin/env python from os import popen class gnuplot_leon: # Author : Leon Email: yangli0534 ...
- UVA 11992 Fast Matrix Operations (二维线段树)
解法:因为至多20行,所以至多建20棵线段树,每行建一个.具体实现如下,有些复杂,慢慢看吧. #include <iostream> #include <cstdio> #in ...
- MongoDB学习（二）Windows环境安装MongoDB
MongoDB的官方下载站是http://www.mongodb.org/downloads,可以去上面下载最新的程序下来. 在下载页面可以看到,对操作系统支持很全面,OS X.Linux.Windo ...
- pycharm简单使用
http://blog.csdn.net/chenggong2dm/article/details/9365437
- EmberJS路由详解
配置路由器,ember中是根据路径寻找与路由名相对应的模板和控制器的,比如当访问http://localhost:80/这个网址的时候,ember框架会自动寻找与路由名post相对应的PostTemp ...
- WMI入门
转:http://www.cnblogs.com/ceachy/archive/2013/03/21/WMI_What.html WMI入门(一):什么是WMI WMI出现至今已经二十多年了,但很多人 ...
- form表单和ajax表单提交（Html.BeginForm()、Ajax.BeginForm()）的差别
有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新: Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请 ...
- 一个DOM元素绑定多个事件时，先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事 ...