angular的GitHub Repository Directive Example学习
运行下面代码
<!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> / <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>
