<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Bootstrap-AngularJS Modal - Directive</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="app.js"></script>
<script src="controller.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
/* sidenav */
.bs-docs-sidenav {
margin-top: 40px;
margin-bottom: 40px;
background-color: #fff;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
display: block;
margin: 0 0 -1px;
padding: 5px 15px;
border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > li > a:hover {
background-color: #f5f5f5;
}
/* extra small devices (phones, up to 480px) */
.bs-docs-sidenav.affix {
position: static;
}
.bs-docs-sidenav.affix > li > a {
color: red;
}
/* small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.bs-docs-sidenav.affix {
position: fixed;
}
.bs-docs-sidenav.affix > li > a {
color: yellow;
}
}
/* medium devices (desktops, 992px and up) */
@media (min-width: 992px) {
.bs-docs-sidenav.affix > li > a {
color: blue;
}
}
/* large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
.bs-docs-sidenav.affix > li > a {
color: black;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 bs-docs-sidenav">
<affix></affix>
</div>
<div class="col-sm-9 affix-section">
<section id="modals" name="modals" affix-scroll>
<div>
<h1>modals</h1>
<p>text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text
</p>
</div>
</section>
<section id="dropdown" name="dropdowns" affix-scroll>
<div>
<h1>dropdown</h1>
<p>text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text</p>
</div>
</section>
<section id="tab" name="tab" affix-scroll>
<div>
<h1>tab</h1>
<p>text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text</p>
</div>
</section>
<section id="button" name="button" affix-scroll>
<div>
<h1>button</h1>
<p>text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text</p>
</div>
</section>
<section id="collapse" name="collapse" affix-scroll>
<div>
<h1>collapse</h1>
<p>text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text,
text, text, text, text, text, text, text, text, text, text, text, text, text</p>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
(function(angular) {
var affixDirective = angular.module('directive.affix', []);
var Templates = {
affix:
'<ul class="nav nav-list bs-docs-sidenav affix">' +
'<li ng-repeat="affix in affixes" id="{{affix.href}}"><a href="{{affix.href}}"><i class="icon-chevron-right"></i>{{affix.name}}</a></li>' +
'</ul>'
};
affixDirective.directive('affix', ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
transclude: true,
template: Templates.affix,
scope: {},
compile: function(element, attrs, transclude) {
var body = $('body');
var affixes = [];
return {
post: function(scope, element, attrs) {
scope.affixes = affixes;
$('.affix-section', body).find('section').each(function() {
var section = $(this);
affixes.push({
href : '#' + section.attr('id'),
name : section.attr('name')
});
$compile(element)(scope);
});
}
};
}
};
}]);
affixDirective.directive('affixScroll', ['$window', function ($window) {
return {
link: function (scope, element, attrs) {
var offset;
var buffer = 80;
var top = element.offset().top - buffer;
var bottom = top + element.height() - buffer;
angular.element($window).on('scroll.affix-scroll', function () {
var id = element.attr('id');
if (angular.isDefined($window.pageYOffset)) {
offset = $window.pageYOffset;
} else {
var iebody = (document.compatMode && document.compatMode !== "BackCompat") ? document.documentElement : document.body;
offset = iebody.scrollTop;
}
var modal = $('li#'+id);
if (top < offset && offset < bottom) {
if (!modal.hasClass('active')) {
modal.addClass('active');
}
} else {
if (modal.hasClass('active')) {
modal.removeClass('active');
}
}
});
}
};
}]);
})(window.angular);
var app = angular.module('myApp', ['directive.affix']);