关于angular中controller和指令交互数据：@

首先看代码：

html：

bb.js

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

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        restrict: "AE",
        template: "
{{cc}}
",
        link: function(scope, element, attrs) {
            scope.cc = attrs.flavor;            
        }

    }
});

按照上面的写法，输出的是aaaaaa

首先定义了controller中的变量ctrlFlavor，然后赋值给html中drink指令的flavor属性。drink指令中，又定义了模板，模板中包含了一个变量cc，在link中将html中flavor属性

的值（即controller的值aaaaaa）赋值给template的cc完成数据交互。

angular对上面的写法提供了一个简便的写法，如下：

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

app.controller('MyCtrl', function($scope){
    $scope.ctrlFlavor = "aaaaaa";
})

app.directive("drink", function(){
    return {
        scope: {
            flavor: '@flavor'
        },
        restrict: "AE",
        template: "
{{flavor}}
",
        link: function(scope, element, attrs) {
        }

    }
});

首先，scope中的@flavor匹配html中的flavor的值，然后将值传入到scope的flavor中，再匹配template的flavor，完成值的传递。

注意，这里@flavor可以写成@aa，html中drink内也要写成aa=""，只要和html中的属性匹配上就好。如果只写一个@符号，则html中必须写成flavor=""，和scope中的名字一致。