angularjs-bindings

by Glenn Dwiyatcita

HTML

<script src="https://unpkg.com/angular@latest/angular.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>

JavaScript

console.clear();

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

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

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

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

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

  function qux() {

  }
}

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

  Object.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);

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

  function onChanges(changes) {
    console.info('// onChanges');

    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']);