mirror of
https://github.com/Hopiu/angular.js.git
synced 2026-04-10 01:51:00 +00:00
5df7e73adf
Replace two compile functions that immediately return a post-link function with link function definitions instead. Closes #5664
371 lines
13 KiB
JavaScript
371 lines
13 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngHref
|
|
* @restrict A
|
|
* @priority 99
|
|
*
|
|
* @description
|
|
* Using Angular markup like `{{hash}}` in an href attribute will
|
|
* make the link go to the wrong URL if the user clicks it before
|
|
* Angular has a chance to replace the `{{hash}}` markup with its
|
|
* value. Until Angular replaces the markup the link will be broken
|
|
* and will most likely return a 404 error.
|
|
*
|
|
* The `ngHref` directive solves this problem.
|
|
*
|
|
* The wrong 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 A
|
|
* @param {template} ngHref any string which can contain `{{}}` markup.
|
|
*
|
|
* @example
|
|
* This example shows various combinations of `href`, `ng-href` and `ng-click` attributes
|
|
* in links and their different behaviors:
|
|
<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'}}">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}}">link</a> (link, change location)
|
|
</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(undefined);
|
|
});
|
|
|
|
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().location().url()).toEqual('/6');
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngSrc
|
|
* @restrict A
|
|
* @priority 99
|
|
*
|
|
* @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 `ngSrc` directive solves this problem.
|
|
*
|
|
* 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 IMG
|
|
* @param {template} ngSrc any string which can contain `{{}}` markup.
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngSrcset
|
|
* @restrict A
|
|
* @priority 99
|
|
*
|
|
* @description
|
|
* Using Angular markup like `{{hash}}` in a `srcset` 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 `ngSrcset` directive solves this problem.
|
|
*
|
|
* The buggy way to write it:
|
|
* <pre>
|
|
* <img srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
|
|
* </pre>
|
|
*
|
|
* The correct way to write it:
|
|
* <pre>
|
|
* <img ng-srcset="http://www.gravatar.com/avatar/{{hash}} 2x"/>
|
|
* </pre>
|
|
*
|
|
* @element IMG
|
|
* @param {template} ngSrcset any string which can contain `{{}}` markup.
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngDisabled
|
|
* @restrict A
|
|
* @priority 100
|
|
*
|
|
* @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 specification does not require browsers to preserve the values of boolean attributes
|
|
* such as disabled. (Their presence means true and their absence means false.)
|
|
* If we put an Angular interpolation expression into such an attribute then the
|
|
* binding information would be lost when the browser removes the attribute.
|
|
* The `ngDisabled` directive solves this problem for the `disabled` attribute.
|
|
* This complementary directive is not removed by the browser and so provides
|
|
* a permanent reliable place to store the binding information.
|
|
*
|
|
* @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 INPUT
|
|
* @param {expression} ngDisabled If the {@link guide/expression expression} is truthy,
|
|
* then special attribute "disabled" will be set on the element
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngChecked
|
|
* @restrict A
|
|
* @priority 100
|
|
*
|
|
* @description
|
|
* The HTML specification does not require browsers to preserve the values of boolean attributes
|
|
* such as checked. (Their presence means true and their absence means false.)
|
|
* If we put an Angular interpolation expression into such an attribute then the
|
|
* binding information would be lost when the browser removes the attribute.
|
|
* The `ngChecked` directive solves this problem for the `checked` attribute.
|
|
* This complementary directive is not removed by the browser and so provides
|
|
* a permanent reliable place to store the binding information.
|
|
* @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 INPUT
|
|
* @param {expression} ngChecked If the {@link guide/expression expression} is truthy,
|
|
* then special attribute "checked" will be set on the element
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngReadonly
|
|
* @restrict A
|
|
* @priority 100
|
|
*
|
|
* @description
|
|
* The HTML specification does not require browsers to preserve the values of boolean attributes
|
|
* such as readonly. (Their presence means true and their absence means false.)
|
|
* If we put an Angular interpolation expression into such an attribute then the
|
|
* binding information would be lost when the browser removes the attribute.
|
|
* The `ngReadonly` directive solves this problem for the `readonly` attribute.
|
|
* This complementary directive is not removed by the browser and so provides
|
|
* a permanent reliable place to store the binding information.
|
|
* @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 INPUT
|
|
* @param {expression} ngReadonly If the {@link guide/expression expression} is truthy,
|
|
* then special attribute "readonly" will be set on the element
|
|
*/
|
|
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngSelected
|
|
* @restrict A
|
|
* @priority 100
|
|
*
|
|
* @description
|
|
* The HTML specification does not require browsers to preserve the values of boolean attributes
|
|
* such as selected. (Their presence means true and their absence means false.)
|
|
* If we put an Angular interpolation expression into such an attribute then the
|
|
* binding information would be lost when the browser removes the attribute.
|
|
* The `ngSelected` directive solves this problem for the `selected` atttribute.
|
|
* This complementary directive is not removed by the browser and so provides
|
|
* a permanent reliable place to store the binding information.
|
|
*
|
|
* @example
|
|
<doc:example>
|
|
<doc:source>
|
|
Check me to select: <input type="checkbox" ng-model="selected"><br/>
|
|
<select>
|
|
<option>Hello!</option>
|
|
<option id="greet" ng-selected="selected">Greetings!</option>
|
|
</select>
|
|
</doc:source>
|
|
<doc:scenario>
|
|
it('should select Greetings!', function() {
|
|
expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy();
|
|
input('selected').check();
|
|
expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy();
|
|
});
|
|
</doc:scenario>
|
|
</doc:example>
|
|
*
|
|
* @element OPTION
|
|
* @param {expression} ngSelected If the {@link guide/expression expression} is truthy,
|
|
* then special attribute "selected" will be set on the element
|
|
*/
|
|
|
|
/**
|
|
* @ngdoc directive
|
|
* @name ng.directive:ngOpen
|
|
* @restrict A
|
|
* @priority 100
|
|
*
|
|
* @description
|
|
* The HTML specification does not require browsers to preserve the values of boolean attributes
|
|
* such as open. (Their presence means true and their absence means false.)
|
|
* If we put an Angular interpolation expression into such an attribute then the
|
|
* binding information would be lost when the browser removes the attribute.
|
|
* The `ngOpen` directive solves this problem for the `open` attribute.
|
|
* This complementary directive is not removed by the browser and so provides
|
|
* a permanent reliable place to store the binding information.
|
|
* @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 {expression} ngOpen If the {@link guide/expression expression} is truthy,
|
|
* then special attribute "open" will be set on the element
|
|
*/
|
|
|
|
var ngAttributeAliasDirectives = {};
|
|
|
|
|
|
// boolean attrs are evaluated
|
|
forEach(BOOLEAN_ATTR, function(propName, attrName) {
|
|
// binding to multiple is not supported
|
|
if (propName == "multiple") return;
|
|
|
|
var normalized = directiveNormalize('ng-' + attrName);
|
|
ngAttributeAliasDirectives[normalized] = function() {
|
|
return {
|
|
priority: 100,
|
|
link: function(scope, element, attr) {
|
|
scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
|
|
attr.$set(attrName, !!value);
|
|
});
|
|
}
|
|
};
|
|
};
|
|
});
|
|
|
|
|
|
// ng-src, ng-srcset, ng-href are interpolated
|
|
forEach(['src', 'srcset', 'href'], function(attrName) {
|
|
var normalized = directiveNormalize('ng-' + attrName);
|
|
ngAttributeAliasDirectives[normalized] = function() {
|
|
return {
|
|
priority: 99, // it needs to run after the attributes are interpolated
|
|
link: function(scope, element, attr) {
|
|
attr.$observe(normalized, function(value) {
|
|
if (!value)
|
|
return;
|
|
|
|
attr.$set(attrName, value);
|
|
|
|
// on IE, if "ng:src" directive declaration is used and "src" attribute doesn't exist
|
|
// then calling element.setAttribute('src', 'foo') doesn't do anything, so we need
|
|
// to set the property as well to achieve the desired effect.
|
|
// we use attr[attrName] value since $set can sanitize the url.
|
|
if (msie) element.prop(attrName, attr[attrName]);
|
|
});
|
|
}
|
|
};
|
|
};
|
|
});
|