...">

Why use an angular one-time binding less than the notation (i.e. `<`) Introduced in 1.5?

Considering

<my-component my-attr="parentModel">

and a definition of a directive that includes:

scope: { localModel:'<myAttr' }

angular will set the binding once . It means that

The expression is evaluated in the context of the parent area.

and

the scope localModel isolated property will display the parentModel value in the parent scope. Any changes in parentModel will be displayed in localModel, but changes in localModel will not be reflected in parentModel

This is great, but how is anything done above what has already been achieved using the angular expression using ampersand notation (i.e. &)?

Considering

<my-component my-attr="parentModel">

and a definition of a directive that includes:

scope: { getModel:'&myAttr' }

scope.getModel() "parentModel" , $watch parentModel , .

0
1

, . , , , link auto $watch()ing. , , - .

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
    };
  });
<div ng-app="app">
  <div ng-controller="MainCtrl as main">
    <div>
      One-way binding:<br>
      parentScope=<input ng-model="main.v1" /><br>
      localScope=<my-component-one val="main.v1"></my-component-one>
    </div>
    <hr>
    <div>
      Expression:<br>
      parentScope=<input ng-model="main.v2" /><br>
      localScope=<my-component-two val="main.v2"></my-component-two>
    </div>
    <hr>
    <div>
      Two-way binding:<br>
      parentScope=<input ng-model="main.v3" /><br>
      localScope=<my-component-three val="main.v3"></my-component-three>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
+1

All Articles