Angular templating proposal examples

checkbox-input-widget.html

<div class="fancy_checkbox">
  <div class="box {{checked}}"></div>
</div>

checkbox-input-widget.js

@Component({
  selector: 'input[type="checkbox"]',
  events: ['view_value_change'],
  template: './fancy_checkbox.html',
  interface: ['true-value', 'false-value']
})
@Inject(Scope, Element('div.box'), Attr(''))
class InputCheckbox {
  constructor(scope, box) {
    this.scope = scope;
    this.scope.checked = false;
  }

  @On('click', 'div.box')
  onClick(event) {
    this.scope.checked = !this.scope.checked;
    this.scope.emit('view_value_change', this.scope.checked ? this.scope.trueValue : this.scope.falseValue);
  }

  @On('model_value_change')
  onModelValueChange(value) {
    this.scope.checked = (value === this.scope.trueValue);
  }
}

example-repeat.html

<!--
  ng-repeat on a non-component (no isolate scope)

  - structured directive creates new scope (non isolate) and define the model on it
  - prototypically inherits, the same as current ng
-->
<ul>
  <li ng-repeat="item in items">{{item.text}}</li>
</ul>


<!--
  ng-repeat on a component (isolate scope)

  - structured directive creates new scope (non isolate) and define the model on it
  - prototypically inherits, the same as current ng
  - user component has its own isolate scope
  - bind-user does <-> binding between the new scope (created by ng-repeat) and the isolate scope (created by the user-detail component)
-->
<div>
  <user-detail bind-user="user" ng-repeat="user in users"></user-detail>
</div>

<!--
  we could simplify passing the local value from ng-repeat to a component
-->
<div>
  <user-detail ng-repeat="user in users"></user-detail>
</div>

ng-if.js

@StructuredDirective({
  selector: '[ng-if]'
})
class NgIf {
  @Watch // shortcut for $scope.$watch(attr.ngIf)
  onExpressionChange(newValue) {
    // add/remove the node with animation
    if (toBool(newValue)) {
      addComponent();
    } else {
      removeComponent();
    }
  }
}

ng-model.js

class NgModel {
  @On('view_value_change')
  onViewValueChange(value) {
    // these can actually process/mutate the value
    this.scope.emit('parse_view_value', value);
    this.scope.emit('validate', value)
    this.scope.ngModel = value;
  }
}

ng-repeat.js

@StructuredDirective({
  selector: '[ng-repeat]'
})
class NgRepeat {
  constructor(expression, scope) {
    var collectionExp = // ... parse the expression
    scope.$watchCollection(collectionExp, this.onCollectionChange);
  }
  onCollectionChange() {
    // we need to pass data in there
    moveComponent();
    addComponentAfter();
    removeComponent();
  }
}

text-input-widget.js

@Component({
  selector: 'input[type="text"]',
  events: ['view_value_change']
})
@Inject(Scope, Element)
class InputText {
  constructor(scope, element) {
    this.scope = scope;
    this.element = element;
  }

  @On('blur')
  onBlur(event) {
    this.scope.emit('view_value_change', event.target.value);
  }

  @On('model_value_change')
  onModelValueChange(value) {
    this.element.value = toString(value);
  }
}