Skip to content

Commit 65e607b

Browse files
author
Dean Sofer
committed
Merge branch 'master' of git://github.com/joseym/angular-ui.github.com
* 'master' of git://github.com/joseym/angular-ui.github.com: making scrolto work in firefox. closes #42 adding docs for route matching directive. refs #39
2 parents c824e7b + 1b70439 commit 65e607b

File tree

2 files changed

+99
-1
lines changed

2 files changed

+99
-1
lines changed

‎index.html‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
<li><a scrollto href="#directives-tinymce">TinyMCE</a></li>
7979
<li><a scrollto href="#directives-sortable">Sortable</a></li>
8080
<li><a scrollto href="#directives-currency">Currency</a></li>
81+
<li><a scrollto href="#directives-routing">Route Matching</a></li>
8182
</ul>
8283
</li>
8384
<li class="dropdown">
@@ -1119,6 +1120,93 @@ <h3>How?</h3>
11191120

11201121

11211122
</section>
1123+
1124+
<section id="directives-routing" ng-controller="RouteCtrl">
1125+
<div class="page-header">
1126+
<h1>Route Checking</h1>
1127+
</div>
1128+
1129+
<div class="row">
1130+
<div class="span6">
1131+
<h3>What?</h3>
1132+
<p>Route Matching Magic. It matches your routes ... magically!</p>
1133+
<div class="well">
1134+
<p class="alert alert-info">Clicking <strong>"Make Active"</strong> will reload the page. Pay attention to the routes.</p>
1135+
<ul>
1136+
<li ui-route="#/directives-routing">uiRoute Info
1137+
<strong ui-if="$uiRoute">IS</strong>
1138+
<strong ui-if="!$uiRoute">is NOT</strong> active.
1139+
</li>
1140+
<li ng-repeat="route in routes" ui-route="#/route-{{ route }}">
1141+
Route {{ route }}
1142+
<strong ui-if="$uiRoute">IS</strong>
1143+
<strong ui-if="!$uiRoute">is NOT</strong> active.
1144+
<a ui-if="!$uiRoute" ng-click="reload($event, route)" href="#route-{{ route }}">Make Active</a>
1145+
</li>
1146+
</ul>
1147+
</div>
1148+
</div>
1149+
1150+
<div class="span6">
1151+
<h3>Why?</h3>
1152+
<p>It would be nice if your app knew what the address path was and acted accordingly, right? Right.</p>
1153+
</div>
1154+
1155+
<div class="span6">
1156+
<h3>Options</h3>
1157+
<ul>
1158+
<li>Out of the box this directive ships with a boolean to determine if the route matches or not: <code>$uiRoute</code>.
1159+
<ul>
1160+
<li>Example Usage: <code>&lt;a ui-route="/page" ng-class="{active: $uiRoute}"&gt;link&lt;/a&gt;</code></li>
1161+
</ul>
1162+
</li>
1163+
<li>Using <code>ui-route</code> as an attribute with value supports the following:
1164+
<ul style="margin-top: 5px;">
1165+
<li>Static: <code>&lt;a ui-route="/page"&gt;</code></li>
1166+
<li>Regular Expression: <code>&lt;a ui-route="/page/[0-9]*"&gt;</code></li>
1167+
<li>Template Vars: <code>&lt;a ui-route="/page/{{ sample }}"&gt;</code></li>
1168+
<li>Template Vars && RegEx: <code>&lt;a ui-route="/page/{{ sample }}/[0-9]*"&gt;</code></li>
1169+
</ul>
1170+
</li>
1171+
<li>Using <code>ui-route</code> with <code>ng-href</code> attribute:
1172+
<ul style="margin-top: 5px;">
1173+
<li>Static: <code>&lt;a ui-route ng-href="/page"&gt;</code></li>
1174+
<li>Template Vars: <code>&lt;a ui-route ng-href="/page/{{ sample }}"&gt;</code></li>
1175+
</ul>
1176+
</li>
1177+
<li>Using <code>ui-route</code> with <code>href</code> attribute:
1178+
<ul style="margin-top: 5px;">
1179+
<li>Static Only: <code>&lt;a ui-route ng-href="/page"&gt;</code></li>
1180+
</ul>
1181+
</li>
1182+
</ul>
1183+
</div>
1184+
1185+
</div>
1186+
1187+
<div class="row">
1188+
<div class="row span12">
1189+
<h3>How?</h3>
1190+
<pre class="prettyprint linenums" ng-non-bindable>
1191+
&lt;ul&gt;
1192+
&lt;li ui-route=&quot;#/route-1&quot;&gt;Route 1
1193+
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
1194+
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
1195+
&lt;/li&gt;
1196+
&lt;li ui-route=&quot;#/route-2&quot;&gt;Route 2
1197+
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
1198+
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
1199+
&lt;/li&gt;
1200+
&lt;li ui-route=&quot;#/route-3&quot;&gt;Route 3
1201+
&lt;strong ui-if=&quot;$uiRoute&quot;&gt;IS&lt;/strong&gt;
1202+
&lt;strong ui-if=&quot;!$uiRoute&quot;&gt;is NOT&lt;/strong&gt; active.
1203+
&lt;/li&gt;
1204+
&lt;/ul&gt;
1205+
</pre>
1206+
</div>
1207+
1208+
</div>
1209+
</section>
11221210

11231211
<section id="filters-highlight">
11241212
<div class="page-header">

‎js/app.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ angular.module('demoApp', ['ui'], function($locationProvider) {
1919
attrs.scrollto = attrs.href;
2020
}
2121
var top = $(attrs.scrollto).offset().top;
22-
$('body').animate({ scrollTop: top }, 800);
22+
$('body,html').animate({ scrollTop: top }, 800);
2323
});
2424
};
2525
}]);
@@ -168,6 +168,16 @@ function CurrencyCtrl($scope) {
168168
};
169169
}
170170

171+
function RouteCtrl($scope, $window){
172+
$scope.sample = "{{ var }}"
173+
$scope.reload = function($event, route){
174+
$event.preventDefault();
175+
$window.location.href = '#route-' + route;
176+
document.location.reload();
177+
}
178+
$scope.routes = [1,2,3];
179+
}
180+
171181
function FormatCtrl($scope) {
172182
$scope.sentence = 'Hello :name, how is the :subject? Are you on the $0, $1 or $2?';
173183
$scope.mode = 'string';

0 commit comments

Comments
 (0)