AngularJS Custom Directive Data Binding

demonstrate one-way binding and two-way binding

by unimous

HTML

<div ng-app="myApp">   
    <input ng-model="var1" />
    <directive1 attribute="{{var1}}"></directive1>
    <directive2 attribute="var1"></directive2>
</div>

JavaScript

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

app.directive('directive1', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      attribute: '@',
    },
    template: '<p>One way binding: <input ng-model="attribute" /></p>',
  };
});

app.directive('directive2', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      attribute: '=',
    },
    template: '<p>Two way binding: <input ng-model="attribute" /></p>',
  };
});