feat(ngSrcBoolean)

Author: vicb

lib/directive/ng_src_boolean.dart

@@ -3,13 +3,13 @@ part of angular.directive;
 /**
  * Allows adding and removing the boolean attributes from the element.
  *
- * Using `<button disabled="{{false}}">` does not work since it would result
+ * Using `<button disabled="false">` does not work since it would result
  * in `<button disabled="false">` rather than `<button>`.
- * Browsers change behavior based on presence/absence of attribute rather the
+ * Browsers change behavior based on presence/absence of the attribute rather
  * its value.
  *
  * For this reason we provide alternate `ng-`attribute directives to
- * add/remove boolean attributes such as `<button ng-disabled="{{false}}">`
+ * add/remove boolean attributes such as `<button ng-disabled="false">`
  * which will result in proper removal of the attribute.
  *
  * The full list of supported attributes are:
@@ -30,18 +30,25 @@ part of angular.directive;
 @NgDirective(selector: '[ng-required]', map: const {'ng-required': '=>required'})
 @NgDirective(selector: '[ng-selected]', map: const {'ng-selected': '=>selected'})
 class NgBooleanAttributeDirective {
-  final NodeAttrs attrs;
-  NgBooleanAttributeDirective(this.attrs);
+  final NgElement _ngElement;
 
-  _setBooleanAttribute(name, value) => attrs[name] = (toBool(value) ? '' : null);
+  NgBooleanAttributeDirective(this._ngElement);
 
-  set checked(value)   => _setBooleanAttribute('checked',  value);
-  set disabled(value)  => _setBooleanAttribute('disabled', value);
-  set multiple(value)  => _setBooleanAttribute('multiple', value);
-  set open(value)      => _setBooleanAttribute('open',     value);
-  set readonly(value)  => _setBooleanAttribute('readonly', value);
-  set required(value)  => _setBooleanAttribute('required', value);
-  set selected(value)  => _setBooleanAttribute('selected', value);
+  void set checked(value)   => _toggleAttribute('checked',  value);
+  void set disabled(value)  => _toggleAttribute('disabled', value);
+  void set multiple(value)  => _toggleAttribute('multiple', value);
+  void set open(value)      => _toggleAttribute('open',     value);
+  void set readonly(value)  => _toggleAttribute('readonly', value);
+  void set required(value)  => _toggleAttribute('required', value);
+  void set selected(value)  => _toggleAttribute('selected', value);
+
+  void _toggleAttribute(attrName, [value]) {
+    if (toBool(value)) {
+      _ngElement.setAttribute(attrName);
+    } else {
+      _ngElement.removeAttribute(attrName);
+    }
+  }
 }
 
 /**
@@ -61,16 +68,17 @@ class NgBooleanAttributeDirective {
  * - [ng-src]
  * - [ng-srcset]
  */
+// todo(vicb) handle in mustache - but might be no interp
 @NgDirective(selector: '[ng-href]',   map: const {'ng-href':   '@href'})
 @NgDirective(selector: '[ng-src]',    map: const {'ng-src':    '@src'})
 @NgDirective(selector: '[ng-srcset]', map: const {'ng-srcset': '@srcset'})
 class NgSourceDirective {
-  final NodeAttrs attrs;
-  NgSourceDirective(this.attrs);
+  final NgElement _ngElement;
+  NgSourceDirective(this._ngElement);
 
-  set href(value)   => attrs['href']   = value;
-  set src(value)    => attrs['src']    = value;
-  set srcset(value) => attrs['srcset'] = value;
+  void set href(value)   => _ngElement.setAttribute('href', value);
+  void set src(value)    => _ngElement.setAttribute('src', value);
+  void set srcset(value) => _ngElement.setAttribute('srcset', value);
 
 }
 
@@ -84,23 +92,39 @@ class NgSourceDirective {
  *
  * @example
  *     <svg>
- *       <circle ng-attr-cx="{{cx}}"></circle>
+ *       <circle ng-attr-cx="cx"></circle>
  *     </svg>
  */
+// todo(vicb) handle in mustache - but might be no interp
 @NgDirective(selector: '[ng-attr-*]')
 class NgAttributeDirective implements NgAttachAware {
-  final NodeAttrs _attrs;
+  static const NG_ATTR_PREFIX = 'ng-attr-';
+  final dom.Element _element;
+  final NgElement _ngElement;
+  final Scope _scope;
+  final Interpolate _interpolate;
+  final FilterMap _filters;
 
-  NgAttributeDirective(this._attrs);
+  NgAttributeDirective(this._element, this._ngElement, this._scope,
+                       this._interpolate, this._filters);
 
   void attach() {
-    String ngAttrPrefix = 'ng-attr-';
-    _attrs.forEach((key, value) {
-      if (key.startsWith(ngAttrPrefix)) {
-        var newKey = key.substring(ngAttrPrefix.length);
-        _attrs[newKey] = value;
-        _attrs.observe(key, (newValue) => _attrs[newKey] = newValue );
+    _element.attributes.forEach((String rawName, String value) {
+      if (rawName.startsWith(NG_ATTR_PREFIX)) {
+        var attrName = rawName.substring(NG_ATTR_PREFIX.length);
+        var expression = _interpolate(value);
+        _scope.watch(expression, (v, _) => _updateAttribute(attrName, v),
+            canChangeModel: false, filters: _filters);
+        _updateAttribute(attrName, '');
       }
     });
   }
+
+  void _updateAttribute(attrName, value) {
+    if (value == null) {
+      _ngElement.removeAttribute(attrName);
+    } else {
+      _ngElement.setAttribute(attrName, value);
+    }
+  }
 }