aboutsummaryrefslogtreecommitdiffstats
path: root/src/ng/directive/ngShowHide.js
diff options
context:
space:
mode:
authorMisko Hevery2012-03-23 14:03:24 -0700
committerMisko Hevery2012-03-28 11:16:35 -0700
commit2430f52bb97fa9d682e5f028c977c5bf94c5ec38 (patch)
treee7529b741d70199f36d52090b430510bad07f233 /src/ng/directive/ngShowHide.js
parent944098a4e0f753f06b40c73ca3e79991cec6c2e2 (diff)
downloadangular.js-2430f52bb97fa9d682e5f028c977c5bf94c5ec38.tar.bz2
chore(module): move files around in preparation for more modules
Diffstat (limited to 'src/ng/directive/ngShowHide.js')
-rw-r--r--src/ng/directive/ngShowHide.js80
1 files changed, 80 insertions, 0 deletions
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
new file mode 100644
index 00000000..40a8a68e
--- /dev/null
+++ b/src/ng/directive/ngShowHide.js
@@ -0,0 +1,80 @@
+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng-show
+ *
+ * @description
+ * The `ng-show` and `ng-hide` directives show or hide a portion of the DOM tree (HTML)
+ * conditionally.
+ *
+ * @element ANY
+ * @param {expression} ng-show If the {@link guide/dev_guide.expressions expression} is truthy
+ * then the element is shown or hidden respectively.
+ *
+ * @example
+ <doc:example>
+ <doc:source>
+ Click me: <input type="checkbox" ng-model="checked"><br/>
+ Show: <span ng-show="checked">I show up when your checkbox is checked.</span> <br/>
+ Hide: <span ng-hide="checked">I hide when your checkbox is checked.</span>
+ </doc:source>
+ <doc:scenario>
+ 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);
+ });
+ </doc:scenario>
+ </doc:example>
+ */
+//TODO(misko): refactor to remove element from the DOM
+var ngShowDirective = ngDirective(function(scope, element, attr){
+ scope.$watch(attr.ngShow, function(value){
+ element.css('display', toBoolean(value) ? '' : 'none');
+ });
+});
+
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng-hide
+ *
+ * @description
+ * The `ng-hide` and `ng-show` directives hide or show a portion
+ * of the HTML conditionally.
+ *
+ * @element ANY
+ * @param {expression} ng-hide If the {@link guide/dev_guide.expressions expression} truthy then
+ * the element is shown or hidden respectively.
+ *
+ * @example
+ <doc:example>
+ <doc:source>
+ Click me: <input type="checkbox" ng-model="checked"><br/>
+ Show: <span ng-show="checked">I show up when you checkbox is checked?</span> <br/>
+ Hide: <span ng-hide="checked">I hide when you checkbox is checked?</span>
+ </doc:source>
+ <doc:scenario>
+ 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);
+ });
+ </doc:scenario>
+ </doc:example>
+ */
+//TODO(misko): refactor to remove element from the DOM
+var ngHideDirective = ngDirective(function(scope, element, attr){
+ scope.$watch(attr.ngHide, function(value){
+ element.css('display', toBoolean(value) ? 'none' : '');
+ });
+});