javascript - ng-repeat 内でディレクティブを使用し、スコープ '@' の神秘的な力を使用する

Question

実際のコードで質問を見たい場合は、ここから始めてください: http://jsbin.com/ayigub/2/edit

単純なディレシーブを書くためのこのほぼ同等の方法を考えてみましょう:

app.directive("drinkShortcut", function() {
  return {
    scope: { flavor: '@'},
    template: '<div>{{flavor}}</div>'
  };
});

app.directive("drinkLonghand", function() {
  return {
    scope: {},
    template: '<div>{{flavor}}</div>',
    link: function(scope, element, attrs) {
      scope.flavor = attrs.flavor;
    }
  };
});

単独で使用すると、2 つのディレクティブは機能し、同じように動作します。

  <!-- This works -->
  <div drink-shortcut flavor="blueberry"></div>
  <hr/>

  <!-- This works -->
  <div drink-longhand flavor="strawberry"></div>
  <hr/>

ただし、ng-repeat 内で使用すると、ショートカット バージョンのみが機能します。

  <!-- Using the shortcut inside a repeat also works -->
  <div ng-repeat="flav in ['cherry', 'grape']">
    <div drink-shortcut flavor="{{flav}}"></div>
  </div>
  <hr/>

  <!-- HOWEVER: using the longhand inside a repeat DOESN'T WORK -->      
  <div ng-repeat="flav in ['cherry', 'grape']">
    <div drink-longhand flavor="{{flav}}"></div>
  </div>

私の質問は次のとおりです。

1. 手書きバージョンが ng-repeat 内で機能しないのはなぜですか?
2. ng-repeat 内で手書きバージョンを機能させるにはどうすればよいですか?