angular的GitHub Repository Directive Example学习

@H_502_0@　angular的GitHub Repository Directive Example学习
@H_502_0@运行下面代码
<!DOCTYPEhtml><htmlng-app="myApp"><head>
<Metacharset="utf-8"/>
<title>GitHubRepositoryDirectiveExample</title>

<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script></head><body>
<h2>Demo</h2>
<div>
<ahref="https://github.com/jquery/jquery"github-repo>
jQuery-NewWaveJavaScript</a>
<ahref="https://github.com/angular/angular.js"github-repo>
AngularJS</a>
</div>
<divappVersion>1.0.1</div>
<script>
//使用严格模式;
'usestrict';varmyApp=angular.module('myApp',[]);/*Directives*/

myApp.directive('appVersion',['version',function(version){returnfunction(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,attrs){varaddress=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":"NotFound","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)
{varrepoInfo=data.data;varformattedRepoName=repoInfo.full_name.replace('/','_');varcontainer=angular.element('<div/>');varrepoContent;if(repoInfo.description&&repoInfo.homepage){
repoContent='<p>'+repoInfo.description+'</p><pclass="homepage"><strong><ahref="'+repoInfo.homepage+'">'+repoInfo.homepage+'</a></strong></p>';
}elseif(repoInfo.description){
repoContent='<p>'+repoInfo.description+'</p>';
}elseif(repoInfo.homepage){
repoContent='<pclass="homepage"><strong><ahref="'+repoInfo.homepage+'">'+repoInfo.homepage+'</a></strong></p>';
}else{
repoContent='<pclass="none">Nodescriptionorhomepage.</p>';
}

container.addClass('reposidget');
container.html('<divclass="reposidget-header"><h2><ahref="https://github.com/'+repoInfo.owner.login+'">'+repoInfo.owner.login+'</a>&nbsp;/&nbsp;<strong><ahref="'+repoInfo.html_url+'">'+repoInfo.name+'</a></strong></h2></div><divclass="reposidget-content">'+repoContent+'</div><divclass="reposidget-footer"><spanclass="social"><spanclass="star">'+repoInfo.watchers_count+'</span><spanclass="fork">'+repoInfo.forks_count+'</span></span><ahref="'+repoInfo.html_url+'/zipball/'+repoInfo.master_branch+'">Downloadaszip</a></div>');//把新建的DOM节点添加到elm后面;elm.after(container);
elm.css('display','none');
});
}
};
}]);</script>
<styletype="text/css">
a.reposidget{
color:#4183c4;
text-decoration:none;
display:block;
clear:both;
margin:10px0;
}

div.reposidget{
font-family:helvetica,arial,freesans,clean,sans-serif!important;
max-width:400px;
color:#666;
display:block;
clear:both;
margin:20px0;
}

.reposidgeta{
font-family:helvetica,sans-serif!important;
color:#4183c4;
text-decoration:none;
}

.reposidget-header{
font-family:helvetica,sans-serif!important;
height:36px;
line-height:36px;
background:#fafafa;
background:-webkit-gradient(linear,00,0100%,from(#fafafa),to(#eaeaea));
background:-webkit-linear-gradient(top,#fafafa,#eaeaea);
background:-moz-linear-gradient(top,#eaeaea);
background:-ms-linear-gradient(top,#eaeaea);
background:-o-linear-gradient(top,#eaeaea);
background:linear-gradient(top,#eaeaea);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#eaeaea')";
border:1pxsolid#eaeaea;
border-radius:3px3px00;
padding:010px00;
overflow:hidden;
text-overflow:ellipsis;
}

.reposidget-headerh2{
font-family:helvetica,sans-serif!important;
overflow:hidden;
text-overflow:ellipsis;
Box-sizing:border-Box;
font-size:16px;
font-weight:normal;
margin:0;
padding:00032px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAMAAADAi10DAAAABlBMVEWioqL///8ciDJAAAAAAnRSTlP/AOW3MEoAAAAxSURBVBjTY2BkQAMYAnAJJAAXQgjjExrKGokBjIwYGqE0XrOwhD1cNcI0nEIwBggAALWWANXTTzTsAAAAAElFTkSuQmCC')7px7pxno-repeat;}

.reposidget-headerh2strong{
font-family:helvetica,sans-serif!important;
font-weight:bold;
}

.reposidget-content{
font-family:helvetica,sans-serif!important;
padding:10px10px8px10px;
background:#fafafa;
border:1pxsolid#ddd;
Box-shadow:inset01px1px#fff;
}

.reposidget-contentp{
font-family:helvetica,sans-serif!important;
margin:0;
font-size:13px;
line-height:21px;
}

.reposidget-contentp.homepage{
text-overflow:ellipsis;
overflow:hidden;
}

.reposidget-contentp.none{
font-family:helvetica,sans-serif!important;
font-style:italic;
color:#999;
}

.reposidget-contentstrong{
font-family:helvetica,sans-serif!important;
line-height:1.25!important;
}

.reposidget-contenta:hover{
font-family:helvetica,sans-serif!important;
text-decoration:underline;
}

.reposidget-footer{
font-family:helvetica,sans-serif!important;
height:46px;
background:#fcfcfc;
border:1pxsolid#ddd;
border-top:none;
border-radius:003px3px;
padding:010px;
}

.reposidget-footer.social{
font-family:helvetica,sans-serif!important;
display:inline-block;
height:26px;
margin:10px000;
}

.reposidget-footer.socialspan{
font-family:helvetica,sans-serif!important;
vertical-align:top;
margin:0;
float:none;
border:1pxsolid#ddd;
height:24px;
line-height:24px;
display:inline-block;
color:#666;
font-size:12px;
font-weight:bold;
padding:05px024px;
}

.reposidget-footer.star{
font-family:helvetica,sans-serif!important;
border-radius:3px003px;
background:#fffurl('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAwUlEQVQoz42SMQ6EIBREuROX0BOY2GzcmmaLTTBxvYM9jVyEC0jJTZTYsQ4R4hKIW7xk/DMT5SNxzpEUa23X9/0IoHMZkhtqrd9VVY0A+ra4rusTcM5HSqkHOsx/imEIlmXxbwqlAGbwrlkihBjS4B3okH3fH0op/m8JWXTiFo0xr7quiwV4yIQtx8Nu29bN81z8bHjIZLd63WYKvOJ1MMaKRXjFYtM0PiSlHI7nFkBjBq9YnKbpg/D1Nzt1e3ox+wXh13nYaOboUAAAAABJRU5ErkJggg==')6px6pxno-repeat;}

.reposidget-footer.fork{
font-family:helvetica,sans-serif!important;
border-left:none!important;
border-radius:03px3px0;
background:#fffurl('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAYAAAAbvf3sAAAA8UlEQVQoz4WRTQqDMBSEXXbRu0gJdCH0AO66KP6cQ4pUJLcSFDyBC0VQ/EHPYt88NKhUu5gwTPJlwos2TZOWJIknhJAQPLIjaX3f323blnVds+CRnQHCcRxZFAULnrILNuM4fi/N8AxgSdNUbZD3kbVte903U2YwMI6j7rquhMjzc6jFQFue56y5WTDQdd0dAUT+tryX2j6rZk89iaoUQF4BwzAYSzN5/S/g+z7fHgSBVFNaA0v9WqZpyrIsnxugaZqfAA5XVfXa/AOWKIrUWMMwlKc/TTc8LMvazBvZIUCHeN5ZlrHgkR0C87y9/byP9AVjF5fB2Yv1MAAAAABJRU5ErkJggg==')7px5pxno-repeat;}

.reposidget-footera{
font-family:helvetica,sans-serif!important;
float:right;
margin:6px000;
display:inline-block;
padding:8px15px;
line-height:1.25;
font-size:12px;
font-weight:bold;
color:#666;
text-shadow:rgba(255,255,0.898438)0px1px;
background:-webkit-gradient(linear,from(#f5f5f5),to(#e5e5e5));
background:-webkit-linear-gradient(top,#f5f5f5,#e5e5e5);
background:-moz-linear-gradient(top,#e5e5e5);
background:-ms-linear-gradient(top,#e5e5e5);
background:-o-linear-gradient(top,#e5e5e5);
background:linear-gradient(top,#e5e5e5);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5',endColorstr='#e5e5e5')";
border-radius:3px;
border:1pxsolid#ddd;
border-bottom-color:#bbb;
Box-shadow:rgba(0,0.0976563)0px1px3px;
-webkit-user-select:none;
}

.reposidget-footera:hover{
color:#337797;
text-shadow:rgba(255,from(#f0f7fa),to(#d8eaf2));
background:-webkit-linear-gradient(top,#f0f7fa,#d8eaf2);
background:-moz-linear-gradient(top,#d8eaf2);
background:-ms-linear-gradient(top,#d8eaf2);
background:-o-linear-gradient(top,#d8eaf2);
background:linear-gradient(top,#d8eaf2);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f7fa',endColorstr='#d8eaf2')";
border:1pxsolid#cbe3ee;
border-bottom-color:#97c7dd;
}

.reposidget-footera:active{
color:#fff;
text-shadow:rgba(0,0.296875)0px-1px0px;
background:-webkit-gradient(linear,from(#0770a0),to(#0ca6dd));
background:-webkit-linear-gradient(top,#0770a0,#0ca6dd);
background:-moz-linear-gradient(top,#0ca6dd);
background:-ms-linear-gradient(top,#0ca6dd);
background:-o-linear-gradient(top,#0ca6dd);
background:linear-gradient(top,#0ca6dd);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0770a0',endColorstr='#0ca6dd')";
border:1pxsolid#2a65a0;
border-bottom-color:#0770a0;
}
</style></body></html>
原文链接：https://www.f2er.com/angularjs/147601.html
angular的GitHub Repository Directive Example学习

猜你在找的Angularjs相关文章
