Directive: scope

AngularJS

by Zaiste

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.1/css/foundation.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<body ng-app="app"  ng-controller="Ctrl">
    <div github>Hello, World</div>
</body>

JavaScript

var app = angular.module('app', []);

app.run(['$rootScope', function ($rootScope) {
    $rootScope.header = 'bound to $rootScope';
}]);

app.controller('Ctrl', ['$scope', function ($scope) {
    $scope.footer = 'bound to Ctrl';
}]);

app.directive('github', function ($http) {
    return {
        restrict: 'A',
        template: '{{header}}<img ng-src="{{data.owner.avatar_url}}"/><strong>{{data.name}}</strong>{{footer}}',
        link: function (scope, el, attrs) {
            $http.get('https://api.github.com/repos/angular/angular.js ').success(function (data) {
                scope.data = data;
            });
        }
    };
});