When To Use Angularjs's One Time Binding (i.e. `<`) Introduced In 1.5?

Given and a directive definition that includes: scope: { localModel:'

Solution 1:

I made this code snippet to try to understand the question better. It seems like there are obvious differences between the two options such as how the link function is handled and some auto $watch()ing. But I'd never used an expression in this way and I think I'm missing something.

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

app.controller('MainCtrl', function() {
  this.v1 = 1;
  this.v2 = 2;
  this.v3 = 3;
});

app.directive('myComponentOne',
  function() {
    return {
      restrict: 'E',
      scope: { v: "<val" },
      template: '<input ng-model="v"/>',
      link: s => s.v = 99
    };
  });

app.directive('myComponentTwo',
  function() {
    return {
      restrict: 'E',
      scope: { v: '&val' },
      template: '<input ng-model="v"/>',
      link: s => s.v = 99
    };
  });

app.directive('myComponentThree',
  function() {
    return {
      restrict: 'E',
      scope: { v: '=val' },
      template: '<input ng-model="v"/>',
      link: s => s.v = 99
    };
  });

<divng-app="app"><divng-controller="MainCtrl as main"><div>
      One-way binding:<br>
      parentScope=<inputng-model="main.v1" /><br>
      localScope=<my-component-oneval="main.v1"></my-component-one></div><hr><div>
      Expression:<br>
      parentScope=<inputng-model="main.v2" /><br>
      localScope=<my-component-twoval="main.v2"></my-component-two></div><hr><div>
      Two-way binding:<br>
      parentScope=<inputng-model="main.v3" /><br>
      localScope=<my-component-threeval="main.v3"></my-component-three></div></div></div><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>

Share