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>&nbsp;/&nbsp;<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>