angular的GitHub Repository Directive Example学习

2024-11-10 技术教程

运行下面代码

<!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><h3>Demo</h3><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,elm,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"><h3><ahref="https://github.com/'+repoInfo.owner.login+'">'+repoInfo.owner.login+'</a> / <strong><ahref="'+repoInfo.html_url+'">'+repoInfo.name+'</a></strong></h3></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,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,00,0100%,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:1pxsolid#eaeaea;border-radius:3px3px00;padding:010px00;overflow:hidden;text-overflow:ellipsis;}.reposidget-headerh3{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:00032px;background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAMAAADAi10DAAAABlBMVEWioqL///8ciDJAAAAAAnRSTlP/AOW3MEoAAAAxSURBVBjTY2BkQAMYAnAJJAAXQgjjExrKGokBjIwYGqE0XrOwhD1cNcI0nEIwBggAALWWANXTTzTsAAAAAElFTkSuQmCC')7px7pxno-repeat;}.reposidget-headerh3strong{font-family:helvetica,arial,freesans,clean,sans-serif!important;font-weight:bold;}.reposidget-content{font-family:helvetica,arial,freesans,clean,sans-serif!important;padding:10px10px8px10px;background:#fafafa;border:1pxsolid#ddd;box-shadow:inset01px1px#fff;}.reposidget-contentp{font-family:helvetica,arial,freesans,clean,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,arial,freesans,clean,sans-serif!important;font-style:italic;color:#999;}.reposidget-contentstrong{font-family:helvetica,arial,freesans,clean,sans-serif!important;line-height:1.25!important;}.reposidget-contenta: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:1pxsolid#ddd;border-top:none;border-radius:003px3px;padding:010px;}.reposidget-footer.social{font-family:helvetica,arial,freesans,clean,sans-serif!important;display:inline-block;height:26px;margin:10px000;}.reposidget-footer.socialspan{font-family:helvetica,arial,freesans,clean,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,arial,freesans,clean,sans-serif!important;border-radius:3px003px;background:#fffurl('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAwUlEQVQoz42SMQ6EIBREuROX0BOY2GzcmmaLTTBxvYM9jVyEC0jJTZTYsQ4R4hKIW7xk/DMT5SNxzpEUa23X9/0IoHMZkhtqrd9VVY0A+ra4rusTcM5HSqkHOsx/imEIlmXxbwqlAGbwrlkihBjS4B3okH3fH0op/m8JWXTiFo0xr7quiwV4yIQtx8Nu29bN81z8bHjIZLd63WYKvOJ1MMaKRXjFYtM0PiSlHI7nFkBjBq9YnKbpg/D1Nzt1e3ox+wXh23nYaOboUAAAAABJRU5ErkJggg==')6px6pxno-repeat;}.reposidget-footer.fork{font-family:helvetica,arial,freesans,clean,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,arial,freesans,clean,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,255,0.898438)0px1px;background:-webkit-gradient(linear,00,0100%,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:1pxsolid#ddd;border-bottom-color:#bbb;box-shadow:rgba(0,0,0,0.0976563)0px1px3px;-webkit-user-select:none;}.reposidget-footera:hover{color:#337797;text-shadow:rgba(255,255,255,0.898438)0px1px;background:-webkit-gradient(linear,00,0100%,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:1pxsolid#cbe3ee;border-bottom-color:#97c7dd;}.reposidget-footera:active{color:#fff;text-shadow:rgba(0,0,0,0.296875)0px-1px0px;background:-webkit-gradient(linear,00,0100%,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:1pxsolid#2a65a0;border-bottom-color:#0770a0;}</style></body></html>

新航道雅思