Added ng:disabled, ng:checked, ng:multiple, ng:readonly, ng:selected to markup.js.

Also added coresponding descriptions  live examples and tests for each directive to be displayed on the website.

Closes #351

1 files changed, 163 insertions, 0 deletions

diff --git a/src/markups.js b/src/markups.js
index 7edde728..09481187 100644
--- a/src/markups.js
+++ b/src/markups.js
@@ -235,8 +235,171 @@ angularTextMarkup('option', function(text, textNode, parentElement){
  * @param {template} template any string which can contain `{{}}` markup.
  */
 
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:disabled
+ *
+ * @description
+ *
+ * The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:
+ * <pre>
+ * <div ng:init="scope = { isDisabled: false }">
+ *  <button disabled="{{scope.isDisabled}}">Disabled</button>
+ * </div>
+ * </pre>
+ *
+ * the HTML specs do not require browsers preserve the special attributes such as disabled.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:disabled.
+ *
+ * @example
+    <doc:example>
+      <doc:source>
+        Click me to toggle: <input type="checkbox" name="checked"><br/>
+        <button name="button" ng:disabled="{{checked}}">Button</button>
+      </doc:source>
+      <doc:scenario>
+        it('should toggle button', function() {
+          expect(element('.doc-example-live :button').attr('disabled')).toBeFalsy();
+          input('checked').check();
+          expect(element('.doc-example-live :button').attr('disabled')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:checked
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as checked.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:checked.
+ * @example
+    <doc:example>
+      <doc:source>
+        Check me to check both: <input type="checkbox" name="master"><br/>
+        <input id="checkSlave" type="checkbox" ng:checked="{{master}}">
+      </doc:source>
+      <doc:scenario>
+        it('should check both checkBoxes', function() {
+          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeFalsy();
+          input('master').check();
+          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:multiple
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as multiple.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:multiple.
+ *
+ * @example
+     <doc:example>
+       <doc:source>
+         Check me check multiple: <input type="checkbox" name="checked"><br/>
+         <select id="select" ng:multiple="{{checked}}">
+           <option>Misko</option>
+           <option>Igor</option>
+           <option>Vojita</option>
+           <option>Di</option>
+         </select>
+       </doc:source>
+       <doc:scenario>
+         it('should toggle multiple', function() {
+           expect(element('.doc-example-live #select').attr('multiple')).toBeFalsy();
+           input('checked').check();
+           expect(element('.doc-example-live #select').attr('multiple')).toBeTruthy();
+         });
+       </doc:scenario>
+     </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:readonly
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as readonly.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:readonly.
+ * @example
+    <doc:example>
+      <doc:source>
+        Check me to make text readonly: <input type="checkbox" name="checked"><br/>
+        <input type="text" ng:readonly="{{checked}}" value="I'm Angular"/>
+      </doc:source>
+      <doc:scenario>
+        it('should toggle readonly attr', function() {
+          expect(element('.doc-example-live :text').attr('readonly')).toBeFalsy();
+          input('checked').check();
+          expect(element('.doc-example-live :text').attr('readonly')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+* @workInProgress
+* @ngdoc directive
+* @name angular.directive.ng:selected
+*
+* @description
+* the HTML specs do not require browsers preserve the special attributes such as selected.(The presense of them means true and absense means false)
+* This prevents the angular compiler from correctly retrieving the binding expression.
+* To solve this problem, we introduce ng:selected.
+* @example
+   <doc:example>
+     <doc:source>
+       Check me to select: <input type="checkbox" name="checked"><br/>
+       <select>
+         <option>Hello!</option>
+         <option id="greet" ng:selected="{{checked}}">Greetings!</option>
+       </select>
+     </doc:source>
+     <doc:scenario>
+       it('should select Greetings!', function() {
+         expect(element('.doc-example-live #greet').attr('selected')).toBeFalsy();
+         input('checked').check();
+         expect(element('.doc-example-live #greet').attr('selected')).toBeTruthy();
+       });
+     </doc:scenario>
+   </doc:example>
+* @element ANY
+* @param {template} template any string which can contain '{{}}' markup.
+*/
+
+
 var NG_BIND_ATTR = 'ng:bind-attr';
 var SPECIAL_ATTRS = {};
+
 forEach('src,href,checked,disabled,multiple,readonly,selected'.split(','), function(name) {
   SPECIAL_ATTRS['ng:' + name] = name;
 });