Angular1.5bindings

by Shogo Kawahara

HTML

<div ng-app="myApp">
  <widget></widget>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0/angular.js"></script>
<style>
</style>

JavaScript

const app = angular.module('myApp', []);

class Widget {
  constructor() {
    this.name = 'Soba';
  }
  
  changeName() {
  	if (this.name == 'Soba') {
    	this.name = 'Udon';
    } else {
    	this.name = 'Soba';
    }
  }
}

app.component('widget', {
	template: '<div>Hello world, {{$ctrl.name}}</div>'+
  '<button ng-click="$ctrl.changeName()">Change Name</button>'+
  '<child-widget name-at="Hi, {{$ctrl.name}}" name-eq="$ctrl.name" name-gt="$ctrl.name"></child-widget>',
	controller: Widget
});

class ChildWidget {
	changeNameAt() {
  	this.nameAt = 'Yakisoba';
  }
  
  changeNameEq() {
  	this.nameEq = 'Yakisoba';
  }
  
  changeNameGt() {
  	this.nameGt = 'Yakisoba';
  }
}

app.component('childWidget', {
	controller: ChildWidget,
  template: '<div>@ {{$ctrl.nameAt}}</div>' + 
  '<div>= {{$ctrl.nameEq}}</div>' +
  '<div>&gt; {{$ctrl.nameGt}}</div>' + 
  '<button ng-click="$ctrl.changeNameAt()">Change nameAt</button>' +
  '<button ng-click="$ctrl.changeNameEq()">Change nameEq</button>' +
  '<button ng-click="$ctrl.changeNameGt()">Change nameGt</button>',
  bindings: {
  	'nameAt': '@',
    'nameEq': '=',
    'nameGt': '<'
  }
});