jeena/Podcast
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Upgrade to angularjs 1.2.0 rc1

Browse source
This commit is contained in:
Colin Frei 2013-08-21 19:46:51 +02:00
parent d223dfd662
commit d6b021bfaf
674 changed files with 79667 additions and 62269 deletions
Download patch file Download diff file Expand all files Collapse all files

85
lib/angular/docs/partials/api/ng.directive:ngSwitch.html Normal file → Executable file
View file

@ -1,25 +1,23 @@
<h1><code ng:non-bindable="">ngSwitch</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/ngSwitch.js#L3" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngSwitch.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngSwitch</code>
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngSwitch.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.
<div><h2 id="Description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngswitch-page"><p>The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.
Elements within ngSwitch but without ngSwitchWhen or ngSwitchDefault directives will be preserved at the location
as specified in the template.</p>
<p>The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it
from the template cache), ngSwitch simply choses one of the nested elements and makes it visible based on which element
matches the value obtained from the evaluated expression. In other words, you define a container element
(where you place the directive), place an expression on the <strong>on="..." attribute</strong>
(or the <strong>ng-switch="..." attribute</strong>), define any inner elements inside of the directive and place
(where you place the directive), place an expression on the <strong>on=&quot;...&quot; attribute</strong>
(or the <strong>ng-switch=&quot;...&quot; attribute</strong>), define any inner elements inside of the directive and place
a when attribute per element. The when attribute is used to inform ngSwitch which element to display when the on
expression is evaluated. If a matching expression is not found via a when attribute then an element with the default
attribute is displayed.</p>
<p>Additionally, you can also provide animations via the ngAnimate attribute to animate the <strong>enter</strong>
and <strong>leave</strong> effects.</p></div>
</div></div>
<h2 id="Usage">Usage</h2>
<div class="usage"><p>This directive can be used as custom element, but we aware of <a href="guide/ie">IE restrictions</a>.</p><pre><code ng:non-bindable="">&lt;ANY ng-switch="expression"&gt;
<div class="usage"><p>This directive can be used as custom element, but be aware of <a href="guide/ie">IE restrictions</a>.</p><pre><code ng:non-bindable="">&lt;ANY ng-switch="expression"&gt;
&lt;ANY ng-switch-when="matchValue1"&gt;...&lt;/ANY&gt;
&lt;ANY ng-switch-when="matchValue2"&gt;...&lt;/ANY&gt;
&lt;ANY ng-switch-default&gt;...&lt;/ANY&gt;
@ -29,28 +27,23 @@ and <strong>leave</strong> effects.</p></div>
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h3 id="Parameters">Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">ngSwitch|on – {*} – </code>
<p>expression to match against <tt>ng-switch-when</tt>.</p></li>
</ul>
<h3 id="Animations">Animations</h3>
<div class="animations"><ul><li>enter - happens after the ngSwtich contents change and the matched child element is placed inside the container</li><li>leave - happens just after the ngSwitch contents change and just before the former contents are removed from the DOM</li></ul></div>
</div>
<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngSwitch|on</td><td><a href="" class="label type-hint type-hint-object">*</a></td><td><div class="ng-directive-page ng-directive-ngswitch-page"><p>expression to match against <tt>ng-switch-when</tt>.</p>
</div></td></tr></tbody></table></div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h4>
<div source-edit="" source-edit-deps="angular.js script.js" source-edit-html="index.html-178" source-edit-css="animations.css" source-edit-js="script.js-179" source-edit-unit="" source-edit-scenario="scenario.js-180"></div>
<div class="example"><div class="ng-directive-page ng-directive-ngswitch-page"><h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js angular-animate.js script.js" source-edit-html="index.html-97" source-edit-css="animations.css" source-edit-js="script.js-98" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-99"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-178" ng-html-wrap=" angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-178">
<pre class="prettyprint linenums" ng-set-text="index.html-97" ng-html-wrap=" angular.js angular-animate.js script.js"></pre>
<script type="text/ng-template" id="index.html-97">
<div ng-controller="Ctrl">
<select ng-model="selection" ng-options="item for item in items">
</select>
<tt>selection={{selection}}</tt>
<hr/>
<div
class="example-animate-container"
ng-switch on="selection"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}">
<div class="animate-switch-container"
ng-switch on="selection">
<div ng-switch-when="settings">Settings Div</div>
<div ng-switch-when="home">Home Span</div>
<div ng-switch-default>default</div>
@ -61,10 +54,22 @@ and <strong>leave</strong> effects.</p></div>
<div class="tab-pane" title="animations.css">
<pre class="prettyprint linenums" ng-set-text="animations.css"></pre>
<style type="text/css" id="animations.css">
.example-leave-setup, .example-enter-setup {
.animate-switch-container {
position:relative;
background:white;
border:1px solid black;
height:40px;
overflow:hidden;
}
.animate-switch-container > div {
padding:10px;
}
.animate-switch-container > .ng-enter,
.animate-switch-container > .ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
@ -75,29 +80,24 @@ and <strong>leave</strong> effects.</p></div>
bottom:0;
}
.example-animate-container > * {
display:block;
padding:10px;
}
.example-enter-setup {
.animate-switch-container > .ng-enter {
top:-50px;
}
.example-enter-start.example-enter-start {
.animate-switch-container > .ng-enter.ng-enter-active {
top:0;
}
.example-leave-setup {
.animate-switch-container > .ng-leave {
top:0;
}
.example-leave-start.example-leave-start {
.animate-switch-container > .ng-leave.ng-leave-active {
top:50px;
}
</style>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-179"></pre>
<script type="text/ng-template" id="script.js-179">
<pre class="prettyprint linenums" ng-set-text="script.js-98"></pre>
<script type="text/ng-template" id="script.js-98">
function Ctrl($scope) {
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
@ -105,8 +105,8 @@ and <strong>leave</strong> effects.</p></div>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-180"></pre>
<script type="text/ng-template" id="scenario.js-180">
<pre class="prettyprint linenums" ng-set-text="scenario.js-99"></pre>
<script type="text/ng-template" id="scenario.js-99">
it('should start in settings', function() {
expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/);
});
@ -120,6 +120,7 @@ and <strong>leave</strong> effects.</p></div>
});
</script>
</div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h4>Demo</h4>
<div class="well doc-example-live animator-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-178" ng-eval-javascript="script.js-179"></div></div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h2>Demo</h4>
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-97" ng-eval-javascript="script.js-98"></div>
</div></div>
</div>