下面是使用@的写法

<div ng-controller="MyCtrl">
        <drink hahaha="{{ctrlFlavor}}"></drink>
     </div>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
  $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
   return {
      restrict:'AE',

      scope:{

           papapa:'@hahaha'   

   }

      template:"<div>{{papapa}}</div>",
   }
});

    <div ng-controller="MyCtrl">
        <drink hahaha="{{ctrlFlavor}}"></drink>
     </div>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
  $scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
   return {
      restrict:'AE',
       template:"<div>{{papapa}}</div>"
        ,
        link:function(scope,element,attrs){
          scope.papapa=attrs.hahaha;  
        }
   }
});

这一节讲蒙蔽了

scope.flavor = attr.flavor。 这个写反了吧，应该是attr.flavor = scope.flavor

首先，flavor是一个属性名，这个属性的值就是controller里$scope.ctrlFlavor的值。

<drink flavor="{{ctrlFlavor}}"></drink>

指令就是为了替换上面这段代码，

myDemo.directive('drink', function () {
    return {
        restrict: 'AE',
        scope: {
            flavor: '@'
        },
        template: '<div>{{flavor}}</div>',
        link: function (scope, element, attr) {
            scope.flavor = attr.flavor;
        }
    }
});

 template: '<div>{{flavor}}</div>' // 这里flavor就是scope.flavor;

而 scope.flavor = attr.flavor;  就是等于 {{ctrlFlavor}} （controller里的$scope.ctrlFlavor）

为了不每次都写一个link，（太麻烦）

于是， 在@的情况下

scope: {
    flavor: '@'
},

就是等于link里面的

scope.flavor = attr.flavor;

一句话总结：这三个地方的flavor就是一个东西，你可以把他们一起换个名字flavor2 什么的，试试

//1
scope: {
    flavor: '@'
},

//2
template: '<div>{{flavor}}</div>',

//3
<drink flavor="{{ctrlFlavor}}"></drink>

我也是刚学习，那里理解错了请指教。