mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-03-18 23:50:23 +00:00
269 lines
9.4 KiB
JavaScript
269 lines
9.4 KiB
JavaScript
'use strict';
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:href
|
|
*
|
|
* @description
|
|
* Using <angular/> markup like {{hash}} in an href attribute makes
|
|
* the page open to a wrong URL, if the user clicks that link before
|
|
* angular has a chance to replace the {{hash}} with actual URL, the
|
|
* link will be broken and will most likely return a 404 error.
|
|
* The `ng:href` solves this problem by placing the `href` in the
|
|
* `ng:` namespace.
|
|
*
|
|
* The buggy way to write it:
|
|
* <pre>
|
|
* <a href="http://www.gravatar.com/avatar/{{hash}}"/>
|
|
* </pre>
|
|
*
|
|
* The correct way to write it:
|
|
* <pre>
|
|
* <a ng:href="http://www.gravatar.com/avatar/{{hash}}"/>
|
|
* </pre>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain `{{}}` markup.
|
|
*
|
|
* @example
|
|
* This example uses `link` variable inside `href` attribute:
|
|
<doc:example>
|
|
<doc:source>
|
|
<input ng:model="value" /><br />
|
|
<a id="link-1" href ng:click="value = 1">link 1</a> (link, don't reload)<br />
|
|
<a id="link-2" href="" ng:click="value = 2">link 2</a> (link, don't reload)<br />
|
|
<a id="link-3" ng:href="/{{'123'}}" ng:ext-link>link 3</a> (link, reload!)<br />
|
|
<a id="link-4" href="" name="xx" ng:click="value = 4">anchor</a> (link, don't reload)<br />
|
|
<a id="link-5" name="xxx" ng:click="value = 5">anchor</a> (no link)<br />
|
|
<a id="link-6" ng:href="/{{value}}" ng:ext-link>link</a> (link, change hash)
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should execute ng:click but not reload when href without value', function() {
|
|
element('#link-1').click();
|
|
expect(input('value').val()).toEqual('1');
|
|
expect(element('#link-1').attr('href')).toBe("");
|
|
});
|
|
|
|
it('should execute ng:click but not reload when href empty string', function() {
|
|
element('#link-2').click();
|
|
expect(input('value').val()).toEqual('2');
|
|
expect(element('#link-2').attr('href')).toBe("");
|
|
});
|
|
|
|
it('should execute ng:click and change url when ng:href specified', function() {
|
|
expect(element('#link-3').attr('href')).toBe("/123");
|
|
|
|
element('#link-3').click();
|
|
expect(browser().window().path()).toEqual('/123');
|
|
});
|
|
|
|
it('should execute ng:click but not reload when href empty string and name specified', function() {
|
|
element('#link-4').click();
|
|
expect(input('value').val()).toEqual('4');
|
|
expect(element('#link-4').attr('href')).toBe("");
|
|
});
|
|
|
|
it('should execute ng:click but not reload when no href but name specified', function() {
|
|
element('#link-5').click();
|
|
expect(input('value').val()).toEqual('5');
|
|
expect(element('#link-5').attr('href')).toBe("");
|
|
});
|
|
|
|
it('should only change url when only ng:href', function() {
|
|
input('value').enter('6');
|
|
expect(element('#link-6').attr('href')).toBe("/6");
|
|
|
|
element('#link-6').click();
|
|
expect(browser().window().path()).toEqual('/6');
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:src
|
|
*
|
|
* @description
|
|
* Using <angular/> markup like `{{hash}}` in a `src` attribute doesn't
|
|
* work right: The browser will fetch from the URL with the literal
|
|
* text `{{hash}}` until <angular/> replaces the expression inside
|
|
* `{{hash}}`. The `ng:src` attribute solves this problem by placing
|
|
* the `src` attribute in the `ng:` namespace.
|
|
*
|
|
* The buggy way to write it:
|
|
* <pre>
|
|
* <img src="http://www.gravatar.com/avatar/{{hash}}"/>
|
|
* </pre>
|
|
*
|
|
* The correct way to write it:
|
|
* <pre>
|
|
* <img ng:src="http://www.gravatar.com/avatar/{{hash}}"/>
|
|
* </pre>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain `{{}}` markup.
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.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 to preserve the special attributes such as disabled.
|
|
* (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 ng:disabled.
|
|
*
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Click me to toggle: <input type="checkbox" ng:model="checked"><br/>
|
|
<button ng:model="button" ng:disabled="{{checked}}">Button</button>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should toggle button', function() {
|
|
expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy();
|
|
input('checked').check();
|
|
expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain '{{}}' markup.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:checked
|
|
*
|
|
* @description
|
|
* The HTML specs do not require browsers to preserve the special attributes such as checked.
|
|
* (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 ng:checked.
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Check me to check both: <input type="checkbox" ng:model="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').prop('checked')).toBeFalsy();
|
|
input('master').check();
|
|
expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain '{{}}' markup.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:multiple
|
|
*
|
|
* @description
|
|
* The HTML specs do not require browsers to preserve the special attributes such as multiple.
|
|
* (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 ng:multiple.
|
|
*
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Check me check multiple: <input type="checkbox" ng:model="checked"><br/>
|
|
<select id="select" ng:multiple="{{checked}}">
|
|
<option>Misko</option>
|
|
<option>Igor</option>
|
|
<option>Vojta</option>
|
|
<option>Di</option>
|
|
</select>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should toggle multiple', function() {
|
|
expect(element('.doc-example-live #select').prop('multiple')).toBeFalsy();
|
|
input('checked').check();
|
|
expect(element('.doc-example-live #select').prop('multiple')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain '{{}}' markup.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:readonly
|
|
*
|
|
* @description
|
|
* The HTML specs do not require browsers to preserve the special attributes such as readonly.
|
|
* (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 ng:readonly.
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Check me to make text readonly: <input type="checkbox" ng:model="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').prop('readonly')).toBeFalsy();
|
|
input('checked').check();
|
|
expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*
|
|
* @element ANY
|
|
* @param {template} template any string which can contain '{{}}' markup.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name angular.module.ng.$compileProvider.directive.ng:selected
|
|
*
|
|
* @description
|
|
* The HTML specs do not require browsers to preserve the special attributes such as selected.
|
|
* (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 ng:selected.
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Check me to select: <input type="checkbox" ng:model="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').prop('selected')).toBeFalsy();
|
|
input('checked').check();
|
|
expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
* @element ANY
|
|
* @param {template} template any string which can contain '{{}}' markup.
|
|
*/
|
|
|