javascript - 何时使用 AngularJS 1.5 中引入的一次性绑定(bind)(即 `<` )？

Question

给定

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

以及指令定义，其中包括:

scope: { localModel:'<myAttr' }

Angular will set up a one time binding 。这意味着什么

The expression is evaluated in the context of the parent scope

和

the isolated scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel, but changes in localModel will not reflect in parentModel

这很棒，但是如何在使用＆符号(即 &)的 Angular 表达式已经可以完成的事情之上完成任何事情？

给定

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

以及指令定义，其中包括:

scope: { getModel:'&myAttr' }

对 scope.getModel() 的任何调用还应该在父作用域的上下文中计算 "parentModel" 表达式，并将此类值提供给父作用域的隔离作用域指令，这里不需要$watchparentModel或担心隔离范围中的值传播回父级。

Answer 1

我编写了这个代码片段是为了更好地理解这个问题。这两个选项之间似乎存在明显的差异，例如如何处理 link 函数和一些自动 $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>