angularjs-bindings

HTML

<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<div id="app">
  <div ng-controller="ParentController as vm">
    bar: <input ng-model="vm.bar.val">
    <button ng-click="vm.newBaz()">new baz</button>
    <xx-hello 
        bar="vm.bar"
        baz="vm.baz"
    >
    </xx-hello>
  </div>
</div>

Babel + JSX

console.clear();

(function () {
  'use strict';

  angular
    .module('app', [])
    .controller('ParentController', ParentController)
    .component('xxHello', {
      template: '<div>{{vm.foo}}, {{vm.bar.val}}</div><pre>{{vm.changes | json}}</pre>',
      bindings: {
        //foo: '=',
        foo: '=?',
        bar: '<',
        optionalBinding: '<?',
        requiredBinding: '<',
        baz: '<',
        //qux: '&',
        qux: '&?'
      },
      controller: Controller,
      controllerAs: 'vm'
    });

  /* @ngInject */
  function ParentController() {
    var vm = this;

    _.assign(vm, {
      bar: {},
      newBaz: newBaz,
      qux: qux
    });

    //////////// implementation details

    function newBaz() {
      vm.baz = {};
    }

    function qux() {

    }
  }

  /* @ngInject */
  function Controller(
    $scope
  ) {
    var vm = this;

    _.assign(vm, {
      $onInit: activate,
      $onChanges: onChanges
    });

    //////////// implementation details

    function activate() {
      console.info('// activate');

      vm.foo = 'foo';
      vm.bar.val = 'bar';

      console.log('qux: %o', vm.qux);
      console.log('requiredBinding: %s', vm.requiredBinding);
      console.log('optionalBinding: %s', vm.optionalBinding);
			
      $scope.$watch('vm.bar', function onBarChange(bar) {
        console.info('// onBarChange');
        console.log('bar: %o', bar.val);
      }, true);
    }

    function onChanges(changes) {
      console.info('// onChanges');
			console.log(changes);
      vm.changes = changes;
      if (changes.bar) {
        var bar = changes.bar.currentValue;

        console.log('bar: %o', bar.val);
      }

      if (changes.baz) {
        var baz = changes.baz.currentValue;

        console.log('baz: %o', baz);
      }
    }
  }
}());

angular
  .bootstrap(document.querySelector('#app'), ['app']);