mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-29 20:40:29 +00:00
304 lines
11 KiB
JavaScript
304 lines
11 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngShow
|
|
*
|
|
* @description
|
|
* The `ngShow` directive shows or hides the given HTML element based on the expression
|
|
* provided to the ngShow attribute. The element is shown or hidden by removing or adding
|
|
* the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
|
|
* in AngularJS and sets the display style to none (using an !important flag).
|
|
*
|
|
* <pre>
|
|
* <!-- when $scope.myValue is truthy (element is visible) -->
|
|
* <div ng-show="myValue"></div>
|
|
*
|
|
* <!-- when $scope.myValue is falsy (element is hidden) -->
|
|
* <div ng-show="myValue" class="ng-hide"></div>
|
|
* </pre>
|
|
*
|
|
* When the ngShow expression evaluates to false then the ng-hide CSS class is added to the class attribute
|
|
* on the element causing it to become hidden. When true, the ng-hide CSS class is removed
|
|
* from the element causing the element not to appear hidden.
|
|
*
|
|
* ## Why is !important used?
|
|
*
|
|
* You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector
|
|
* can be easily overridden by heavier selectors. For example, something as simple
|
|
* as changing the display style on a HTML list item would make hidden elements appear visible.
|
|
* This also becomes a bigger issue when dealing with CSS frameworks.
|
|
*
|
|
* By using !important, the show and hide behavior will work as expected despite any clash between CSS selector
|
|
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
|
|
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
|
|
*
|
|
* ### Overriding .ng-hide
|
|
*
|
|
* If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by
|
|
* restating the styles for the .ng-hide class in CSS:
|
|
* <pre>
|
|
* .ng-hide {
|
|
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
|
|
* display:block!important;
|
|
*
|
|
* //this is just another form of hiding an element
|
|
* position:absolute;
|
|
* top:-9999px;
|
|
* left:-9999px;
|
|
* }
|
|
* </pre>
|
|
*
|
|
* Just remember to include the important flag so the CSS override will function.
|
|
*
|
|
* ## A note about animations with ngShow
|
|
*
|
|
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
|
|
* is true and false. This system works like the animation system present with ngClass except that
|
|
* you must also include the !important flag to override the display property
|
|
* so that you can perform an animation when the element is hidden during the time of the animation.
|
|
*
|
|
* <pre>
|
|
* //
|
|
* //a working example can be found at the bottom of this page
|
|
* //
|
|
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
* transition:0.5s linear all;
|
|
* display:block!important;
|
|
* }
|
|
*
|
|
* .my-element.ng-hide-add { ... }
|
|
* .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
* .my-element.ng-hide-remove { ... }
|
|
* .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
* </pre>
|
|
*
|
|
* @animations
|
|
* addClass: .ng-hide - happens after the ngShow expression evaluates to a truthy value and the just before contents are set to visible
|
|
* removeClass: .ng-hide - happens after the ngShow expression evaluates to a non truthy value and just before the contents are set to hidden
|
|
*
|
|
* @element ANY
|
|
* @param {expression} ngShow If the {@link guide/expression expression} is truthy
|
|
* then the element is shown or hidden respectively.
|
|
*
|
|
* @example
|
|
<example animations="true">
|
|
<file name="index.html">
|
|
Click me: <input type="checkbox" ng-model="checked"><br/>
|
|
<div>
|
|
Show:
|
|
<div class="check-element animate-show" ng-show="checked">
|
|
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Hide:
|
|
<div class="check-element animate-show" ng-hide="checked">
|
|
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
|
|
</div>
|
|
</div>
|
|
</file>
|
|
<file name="animations.css">
|
|
.animate-show.ng-hide-add,
|
|
.animate-show.ng-hide-remove {
|
|
-webkit-transition:all linear 0.5s;
|
|
-moz-transition:all linear 0.5s;
|
|
-o-transition:all linear 0.5s;
|
|
transition:all linear 0.5s;
|
|
display:block!important;
|
|
}
|
|
|
|
.animate-show.ng-hide-add.ng-hide-add-active,
|
|
.animate-show.ng-hide-remove {
|
|
line-height:0;
|
|
opacity:0;
|
|
padding:0 10px;
|
|
}
|
|
|
|
.animate-show.ng-hide-add,
|
|
.animate-show.ng-hide-remove.ng-hide-remove-active {
|
|
line-height:20px;
|
|
opacity:1;
|
|
padding:10px;
|
|
border:1px solid black;
|
|
background:white;
|
|
}
|
|
|
|
.check-element {
|
|
padding:10px;
|
|
border:1px solid black;
|
|
background:white;
|
|
}
|
|
</file>
|
|
<file name="scenario.js">
|
|
it('should check ng-show / ng-hide', function() {
|
|
expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
|
|
expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
|
|
|
|
input('checked').check();
|
|
|
|
expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
|
|
expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
|
|
});
|
|
</file>
|
|
</example>
|
|
*/
|
|
var ngShowDirective = ['$animate', function($animate) {
|
|
return function(scope, element, attr) {
|
|
scope.$watch(attr.ngShow, function ngShowWatchAction(value){
|
|
$animate[toBoolean(value) ? 'removeClass' : 'addClass'](element, 'ng-hide');
|
|
});
|
|
};
|
|
}];
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngHide
|
|
*
|
|
* @description
|
|
* The `ngHide` directive shows or hides the given HTML element based on the expression
|
|
* provided to the ngHide attribute. The element is shown or hidden by removing or adding
|
|
* the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
|
|
* in AngularJS and sets the display style to none (using an !important flag).
|
|
*
|
|
* <pre>
|
|
* <!-- when $scope.myValue is truthy (element is hidden) -->
|
|
* <div ng-hide="myValue"></div>
|
|
*
|
|
* <!-- when $scope.myValue is falsy (element is visible) -->
|
|
* <div ng-hide="myValue" class="ng-hide"></div>
|
|
* </pre>
|
|
*
|
|
* When the ngHide expression evaluates to true then the .ng-hide CSS class is added to the class attribute
|
|
* on the element causing it to become hidden. When false, the ng-hide CSS class is removed
|
|
* from the element causing the element not to appear hidden.
|
|
*
|
|
* ## Why is !important used?
|
|
*
|
|
* You may be wondering why !important is used for the .ng-hide CSS class. This is because the `.ng-hide` selector
|
|
* can be easily overridden by heavier selectors. For example, something as simple
|
|
* as changing the display style on a HTML list item would make hidden elements appear visible.
|
|
* This also becomes a bigger issue when dealing with CSS frameworks.
|
|
*
|
|
* By using !important, the show and hide behavior will work as expected despite any clash between CSS selector
|
|
* specificity (when !important isn't used with any conflicting styles). If a developer chooses to override the
|
|
* styling to change how to hide an element then it is just a matter of using !important in their own CSS code.
|
|
*
|
|
* ### Overriding .ng-hide
|
|
*
|
|
* If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by
|
|
* restating the styles for the .ng-hide class in CSS:
|
|
* <pre>
|
|
* .ng-hide {
|
|
* //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
|
|
* display:block!important;
|
|
*
|
|
* //this is just another form of hiding an element
|
|
* position:absolute;
|
|
* top:-9999px;
|
|
* left:-9999px;
|
|
* }
|
|
* </pre>
|
|
*
|
|
* Just remember to include the important flag so the CSS override will function.
|
|
*
|
|
* ## A note about animations with ngHide
|
|
*
|
|
* Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
|
|
* is true and false. This system works like the animation system present with ngClass, except that
|
|
* you must also include the !important flag to override the display property so
|
|
* that you can perform an animation when the element is hidden during the time of the animation.
|
|
*
|
|
* <pre>
|
|
* //
|
|
* //a working example can be found at the bottom of this page
|
|
* //
|
|
* .my-element.ng-hide-add, .my-element.ng-hide-remove {
|
|
* transition:0.5s linear all;
|
|
* display:block!important;
|
|
* }
|
|
*
|
|
* .my-element.ng-hide-add { ... }
|
|
* .my-element.ng-hide-add.ng-hide-add-active { ... }
|
|
* .my-element.ng-hide-remove { ... }
|
|
* .my-element.ng-hide-remove.ng-hide-remove-active { ... }
|
|
* </pre>
|
|
*
|
|
* @animations
|
|
* removeClass: .ng-hide - happens after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden
|
|
* addClass: .ng-hide - happens after the ngHide expression evaluates to a non truthy value and just before the contents are set to visible
|
|
*
|
|
* @element ANY
|
|
* @param {expression} ngHide If the {@link guide/expression expression} is truthy then
|
|
* the element is shown or hidden respectively.
|
|
*
|
|
* @example
|
|
<example animations="true">
|
|
<file name="index.html">
|
|
Click me: <input type="checkbox" ng-model="checked"><br/>
|
|
<div>
|
|
Show:
|
|
<div class="check-element animate-hide" ng-show="checked">
|
|
<span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
Hide:
|
|
<div class="check-element animate-hide" ng-hide="checked">
|
|
<span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
|
|
</div>
|
|
</div>
|
|
</file>
|
|
<file name="animations.css">
|
|
.animate-hide.ng-hide-add,
|
|
.animate-hide.ng-hide-remove {
|
|
-webkit-transition:all linear 0.5s;
|
|
-moz-transition:all linear 0.5s;
|
|
-o-transition:all linear 0.5s;
|
|
transition:all linear 0.5s;
|
|
display:block!important;
|
|
}
|
|
|
|
.animate-hide.ng-hide-add.ng-hide-add-active,
|
|
.animate-hide.ng-hide-remove {
|
|
line-height:0;
|
|
opacity:0;
|
|
padding:0 10px;
|
|
}
|
|
|
|
.animate-hide.ng-hide-add,
|
|
.animate-hide.ng-hide-remove.ng-hide-remove-active {
|
|
line-height:20px;
|
|
opacity:1;
|
|
padding:10px;
|
|
border:1px solid black;
|
|
background:white;
|
|
}
|
|
|
|
.check-element {
|
|
padding:10px;
|
|
border:1px solid black;
|
|
background:white;
|
|
}
|
|
</file>
|
|
<file name="scenario.js">
|
|
it('should check ng-show / ng-hide', function() {
|
|
expect(element('.doc-example-live .check-element:first:hidden').count()).toEqual(1);
|
|
expect(element('.doc-example-live .check-element:last:visible').count()).toEqual(1);
|
|
|
|
input('checked').check();
|
|
|
|
expect(element('.doc-example-live .check-element:first:visible').count()).toEqual(1);
|
|
expect(element('.doc-example-live .check-element:last:hidden').count()).toEqual(1);
|
|
});
|
|
</file>
|
|
</example>
|
|
*/
|
|
var ngHideDirective = ['$animate', function($animate) {
|
|
return function(scope, element, attr) {
|
|
scope.$watch(attr.ngHide, function ngHideWatchAction(value){
|
|
$animate[toBoolean(value) ? 'addClass' : 'removeClass'](element, 'ng-hide');
|
|
});
|
|
};
|
|
}];
|