AngularJS Example

by volpeo

HTML

<div ng-app="breadcrumbDemo">
    <div ng-controller="ApplicationController">
        <breadcrumb></breadcrumb>
    </div>
</div>

CSS

* { 
    font-size: 24px;
}
li {
    float: left;
}
li::after {
 content: " » ";
}
li:last-child::after {
    content: "";
}

JavaScript

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

breadcrumbDemo.controller('ApplicationController', 
                      ['$scope', function ($scope) {
    $scope.historic = [
        { name: "Tatoïne", link: "/9754-tatoine" },
        { name: "Endor", link: "/7897-endor" },
        { name: "Yavin", link: "/1852-Yavin" }
    ]
    $scope.current_page = { name: "Naboo", link: "/3975-Naboo" }
                              
}]);
breadcrumbDemo.directive('breadcrumb', function () {
        return {
            restrict   : 'E',
            replace    : true,
            template   : '<ol class="breadcrumb">'
            +'<li ng-repeat="page in historic">'
            +'<a ng-href="#{{page.link}}">{{page.name}}</a>'
            +'</li>'
            +'<li class="active">{{current_page.name}}</li>'
            +'</ol>'
        }
});