Angularjs 指令中嵌套的函数未发出警报

两个问题：是否可以访问位于控制器中的my showData（）函数，即使它不在指令中？我也在指令中放置了一个，但它仍然没有发出警报？请告诉我我做错了什么

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'productController'，['$scope'，
职能（$范围）{
$scope.product1={
姓名：'电话'，
价格：'100'，
股票：对
};
$scope.product2={
名称：“Ipad”，
价格：'1000'，
股票：对
};
$scope.product3={
名称：“笔记本电脑”，
价格：'800'，
股票：假
};
$scope.showData=函数（）{
警报（“显示数据”）；
}
}
]);
myApp.directive（'myInventory'，function（）{
返回{
限制：'E'，
范围：{
名称：“@”，
价格：'@'
},
模板：“{name}成本{{price}}变更成本”
};
directive.link=函数（$scope，element）{
$scope.showData=函数（）{
警报（“显示数据”）；
};
}
返回指令；
});

{{product1.name}
{{product2.name}
{{product3.name}
在指令中，您返回得太早，因此有一半代码没有执行

myApp.directive('myInventory', function() {
      return {
        restrict: 'E',
        scope: {
          name: '@',
          price: '@'
        },
        template: '{{name}} costs {{price}} <button ng-click="showData()">change cost</button>',
        link: function($scope, element) {
          $scope.showData = function() {
            alert("Display Data");
          };
        }
      });

用这样的函数调用您的指令

<my-inventory show-data="showData()" name="{{ something }}" price="{{ something }}"></my-inventory>


非常有趣哦，我看到了&literal第二部分（为我从控制器访问函数不起作用。我添加了&literal，但仍然不会执行。只是好奇它是如何工作的）你能更新上面的代码以反映你所做的更改吗？我不想覆盖上面的解决方案，因为你确实用答案#1解决了问题。我只是想看看你第二个答案中建议的正确版本。
<my-inventory show-data="showData()" name="{{ something }}" price="{{ something }}"></my-inventory>