OLD | NEW |
| (Empty) |
1 part of angular.directive; | |
2 | |
3 /** | |
4 * Allows adding and removing the boolean attributes from the element. | |
5 * | |
6 * Using `<button disabled="{{false}}">` does not work since it would result | |
7 * in `<button disabled="false">` rather than `<button>`. | |
8 * Browsers change behavior based on presence/absence of attribute rather the | |
9 * its value. | |
10 * | |
11 * For this reason we provide alternate `ng-`attribute directives to | |
12 * add/remove boolean attributes such as `<button ng-disabled="{{false}}">` | |
13 * which will result in proper removal of the attribute. | |
14 * | |
15 * The full list of supported attributes are: | |
16 * | |
17 * - [ng-checked] | |
18 * - [ng-disabled] | |
19 * - [ng-multiple] | |
20 * - [ng-open] | |
21 * - [ng-readonly] | |
22 * - [ng-required] | |
23 * - [ng-selected] | |
24 */ | |
25 @NgDirective(selector: '[ng-checked]', map: const {'ng-checked': '=>checked'}) | |
26 @NgDirective(selector: '[ng-disabled]', map: const {'ng-disabled': '=>disabled'}
) | |
27 @NgDirective(selector: '[ng-multiple]', map: const {'ng-multiple': '=>multiple'}
) | |
28 @NgDirective(selector: '[ng-open]', map: const {'ng-open': '=>open'}) | |
29 @NgDirective(selector: '[ng-readonly]', map: const {'ng-readonly': '=>readonly'}
) | |
30 @NgDirective(selector: '[ng-required]', map: const {'ng-required': '=>required'}
) | |
31 @NgDirective(selector: '[ng-selected]', map: const {'ng-selected': '=>selected'}
) | |
32 class NgBooleanAttributeDirective { | |
33 final NodeAttrs attrs; | |
34 NgBooleanAttributeDirective(this.attrs); | |
35 | |
36 _setBooleanAttribute(name, value) => attrs[name] = (toBool(value) ? '' : null)
; | |
37 | |
38 set checked(value) => _setBooleanAttribute('checked', value); | |
39 set disabled(value) => _setBooleanAttribute('disabled', value); | |
40 set multiple(value) => _setBooleanAttribute('multiple', value); | |
41 set open(value) => _setBooleanAttribute('open', value); | |
42 set readonly(value) => _setBooleanAttribute('readonly', value); | |
43 set required(value) => _setBooleanAttribute('required', value); | |
44 set selected(value) => _setBooleanAttribute('selected', value); | |
45 } | |
46 | |
47 /** | |
48 * In browser some attributes have network side-effect. If the attribute | |
49 * has `{{interpolation}}` in it it may cause browser to fetch bogus URLs. | |
50 * | |
51 * Example: In `<img src="{{username}}.png">` the browser will fetch the image | |
52 * `http://server/{{username}}.png` before Angular has a chance to replace the | |
53 * attribute with data-bound url. | |
54 * | |
55 * For this reason we provide `ng-`prefixed attributes which avoid the issues | |
56 * mentioned above as in this example: `<img ng-src="{{username}}.png">`. | |
57 * | |
58 * The full list of supported attributes are: | |
59 * | |
60 * - [ng-href] | |
61 * - [ng-src] | |
62 * - [ng-srcset] | |
63 */ | |
64 @NgDirective(selector: '[ng-href]', map: const {'ng-href': '@href'}) | |
65 @NgDirective(selector: '[ng-src]', map: const {'ng-src': '@src'}) | |
66 @NgDirective(selector: '[ng-srcset]', map: const {'ng-srcset': '@srcset'}) | |
67 class NgSourceDirective { | |
68 final NodeAttrs attrs; | |
69 NgSourceDirective(this.attrs); | |
70 | |
71 set href(value) => attrs['href'] = value; | |
72 set src(value) => attrs['src'] = value; | |
73 set srcset(value) => attrs['srcset'] = value; | |
74 | |
75 } | |
76 | |
77 /** | |
78 * In SVG some attributes have a specific syntax. Placing `{{interpolation}}` in | |
79 * those attributes will break the attribute syntax, and browser will clear the | |
80 * attribute. | |
81 * | |
82 * The `ng-attr-*` is a generic way to use interpolation without breaking the | |
83 * attribute syntax validator. The `ng-attr-` part get stripped. | |
84 * | |
85 * @example | |
86 * <svg> | |
87 * <circle ng-attr-cx="{{cx}}"></circle> | |
88 * </svg> | |
89 */ | |
90 @NgDirective(selector: '[ng-attr-*]') | |
91 class NgAttributeDirective implements NgAttachAware { | |
92 final NodeAttrs _attrs; | |
93 | |
94 NgAttributeDirective(this._attrs); | |
95 | |
96 void attach() { | |
97 String ngAttrPrefix = 'ng-attr-'; | |
98 _attrs.forEach((key, value) { | |
99 if (key.startsWith(ngAttrPrefix)) { | |
100 var newKey = key.substring(ngAttrPrefix.length); | |
101 _attrs[newKey] = value; | |
102 _attrs.observe(key, (newValue) => _attrs[newKey] = newValue ); | |
103 } | |
104 }); | |
105 } | |
106 } | |
OLD | NEW |