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

Update Angular to 1.2.0 RC2

Browse source
This commit is contained in:
Colin Frei 2013-09-22 11:10:37 +02:00
parent 7416269494
commit 0d3a40980e
184 changed files with 17993 additions and 21133 deletions
Download patch file Download diff file Expand all files Collapse all files

42
lib/angular/docs/partials/api/ng.directive:ngClass.html
View file

@ -28,10 +28,10 @@ element.</p>
<h2 id="Example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngclass-page"><p>Example that demostrates basic bindings via ngClass directive.
<h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-22" source-edit-css="style.css" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-23"></div>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-52" source-edit-css="style.css-53" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-54"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-22" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-22">
<pre class="prettyprint linenums" ng-set-text="index.html-52" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-52">
<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>
<input type="checkbox" ng-model="bold"> bold
<input type="checkbox" ng-model="strike"> strike
@ -47,8 +47,8 @@ element.</p>
</script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css"></pre>
<style type="text/css" id="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-53"></pre>
<style type="text/css" id="style.css-53">
.strike {
text-decoration: line-through;
}
@ -61,8 +61,8 @@ element.</p>
</style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-23"></pre>
<script type="text/ng-template" id="scenario.js-23">
<pre class="prettyprint linenums" ng-set-text="scenario.js-54"></pre>
<script type="text/ng-template" id="scenario.js-54">
it('should let you toggle the class', function() {
expect(element('.doc-example-live p:first').prop('className')).not().toMatch(/bold/);
@ -91,14 +91,14 @@ element.</p>
</script>
</div>
</div><h2>Demo</h2>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-22" ng-eval-javascript=""></div>
<div class="well doc-example-live animate-container" ng-embed-app="" ng-set-html="index.html-52" ng-eval-javascript=""></div>
<h2>Animations</h2>
<p>Example that demostrates how addition and removal of classes can be animated.</p>
<p>The example below demonstrates how to perform animations using ngClass.</p>
<h2>Source</h2>
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-24" source-edit-css="style.css-25" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-26"></div>
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-55" source-edit-css="style.css-56" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario="scenario.js-57"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-24" ng-html-wrap=" angular.js angular-animate.js"></pre>
<script type="text/ng-template" id="index.html-24">
<pre class="prettyprint linenums" ng-set-text="index.html-55" ng-html-wrap=" angular.js angular-animate.js"></pre>
<script type="text/ng-template" id="index.html-55">
<input type="button" value="set" ng-click="myVar='my-class'">
<input type="button" value="clear" ng-click="myVar=''">
<br>
@ -106,8 +106,8 @@ element.</p>
</script>
</div>
<div class="tab-pane" title="style.css">
<pre class="prettyprint linenums" ng-set-text="style.css-25"></pre>
<style type="text/css" id="style.css-25">
<pre class="prettyprint linenums" ng-set-text="style.css-56"></pre>
<style type="text/css" id="style.css-56">
.my-class-add, .my-class-remove {
-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;
@ -128,8 +128,8 @@ element.</p>
</style>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-26"></pre>
<script type="text/ng-template" id="scenario.js-26">
<pre class="prettyprint linenums" ng-set-text="scenario.js-57"></pre>
<script type="text/ng-template" id="scenario.js-57">
it('should check ng-class', function() {
expect(element('.doc-example-live span').prop('className')).not().
toMatch(/my-class/);
@ -146,7 +146,13 @@ element.</p>
});
</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><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-24" ng-eval-javascript=""></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</h2>
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-55" ng-eval-javascript=""></div>
<h2>ngClass and pre-existing CSS3 Transitions/Animations</h4>
<p>The ngClass directive still supports CSS3 Transitions/Animations even if they do not follow the ngAnimate CSS naming structure.
Therefore, if any CSS3 Transition/Animation styles (outside of ngAnimate) are set on the element, then, if a ngClass animation
is triggered, the ngClass animation will be skipped so that ngAnimate can allow for the pre-existing transition or animation to
take over. This restriction allows for ngClass to still work with standard CSS3 Transitions/Animations that are defined
outside of ngAnimate.</p>
</div></div>
</div>