feat(directive): added ng-open boolean directive

Closes# 1797 add ng-open attribute
angular · Jan 19, 2013 · b8bd4d5 · b8bd4d5
1 parent b2f4625
commit b8bd4d5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/src/jqLite.js b/src/jqLite.js
@@ -353,11 +353,11 @@ var JQLitePrototype = JQLite.prototype = {
 // value on get.
 //////////////////////////////////////////
 var BOOLEAN_ATTR = {};
-forEach('multiple,selected,checked,disabled,readOnly,required'.split(','), function(value) {
+forEach('multiple,selected,checked,disabled,readOnly,required,open'.split(','), function(value) {
  BOOLEAN_ATTR[lowercase(value)] = value;
 });
 var BOOLEAN_ELEMENTS = {};
-forEach('input,select,option,textarea,button,form'.split(','), function(value) {
+forEach('input,select,option,textarea,button,form,details'.split(','), function(value) {
  BOOLEAN_ELEMENTS[uppercase(value)] = true;
 });
 

diff --git a/src/ng/directive/booleanAttrs.js b/src/ng/directive/booleanAttrs.js
@@ -272,6 +272,37 @@
  * @param {string} expression Angular expression that will be evaluated.
  */
 
+/**
+ * @ngdoc directive
+ * @name ng.directive:ngOpen
+ * @restrict A
+ *
+ * @description
+ * The HTML specs do not require browsers to preserve the special attributes such as open.
+ * (The presence of them means true and absence means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce the `ngMultiple` directive.
+ *
+ * @example
+ <doc:example>
+ <doc:source>
+ Check me check multiple: <input type="checkbox" ng-model="open"><br/>
+ <details id="details" ng-open="open">
+ <summary>Show/Hide me</summary>
+ </details>
+ </doc:source>
+ <doc:scenario>
+ it('should toggle open', function() {
+ expect(element('#details').prop('open')).toBeFalsy();
+ input('open').check();
+ expect(element('#details').prop('open')).toBeTruthy();
+ });
+ </doc:scenario>
+ </doc:example>
+ *
+ * @element DETAILS
+ * @param {string} expression Angular expression that will be evaluated.
+ */
 
 var ngAttributeAliasDirectives = {};
 

diff --git a/test/ng/directive/booleanAttrsSpec.js b/test/ng/directive/booleanAttrsSpec.js
@@ -74,6 +74,16 @@ describe('boolean attr directives', function() {
  $rootScope.$digest();
  expect(element.attr('multiple')).toBeTruthy();
  }));
+
+ it('should bind open', inject(function($rootScope, $compile) {
+ element = $compile('<details ng-open="isOpen"></details>')($rootScope)
+ $rootScope.isOpen=false;
+ $rootScope.$digest();
+ expect(element.attr('open')).toBeFalsy();
+ $rootScope.isOpen=true;
+ $rootScope.$digest();
+ expect(element.attr('open')).toBeTruthy();
+ }));
 });