kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-23 11:37:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

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

Closes #351
This commit is contained in:
Di Peng
2011-06-06 12:13:07 -07:00
committed by Igor Minar
parent c8ee00cb2b
commit e6ee994764
4 changed files with 216 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/directives.js
View File

@@ -384,7 +384,8 @@ var REMOVE_ATTRIBUTES = {
'disabled':'disabled',
'readonly':'readOnly',
'checked':'checked',
'selected':'selected'
'selected':'selected',
'multiple':'multiple'
};
/**
* @workInProgress

163
src/markups.js
View File

@@ -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;
});