Angular 用于使元素 ng-clickable 的指令？

Question

我正在尝试制作一个可重复使用的指令，该指令从给定对象生成 PDF 报告。

Javascript:

angular.module('myApp', [])

.controller('DemoCtrl', [function($scope) {
  $scope.data = { test: 'testing!' }
}])

.directive('pdfMake', [function() {
  return {
    restrict: 'AE',
    scope: {
      data: '='
    },
    template: '<a ng-click="generatePdf(data)">generate PDF</a>',
    link: function($scope) {

      $scope.generatePdf = function(data) {
        alert(data)
      }
    }
  }
}])

模板：

<button pdf-make data="data">Export Source</button>

或更好...

<button pdf-make="data">Export Source</button>

唯一的问题是我需要在 <button>、<span> 或下拉菜单 <li> 等不同元素上重复使用该指令。

我知道我做错了，因为我在不想替换按钮文本时指定了一个模板。我只需要它来处理点击时给定的数据。我找不到任何与我正在尝试做的类似的例子。这在隔离范围内可能吗？谢谢。

更新： 基于@chandings 的回答，我更新了我的 plunk the plunk 并使用 element.bind('click') 做了魅力： http://plnkr.co/edit/CkgCL1IM095PDSdd3zTS?p=preview

Answer 1

你只需要嵌入。您定义控制器的方式也存在问题。

应该是

angular.module('myApp', [])

.controller('DemoCtrl', ["$scope", function($scope) {
  $scope.data = { test: 'testing!' }
}])

或

angular.module('myApp', [])

.controller('DemoCtrl', function($scope) {
  $scope.data = { test: 'testing!' }
})

这里是你的 plunker link 的一个分支，经过我的编辑使其工作。

希望这就是您想要的。 http://plnkr.co/edit/JmXEMFsZezha2N0rScko?p=preview

Angular 用于使元素 ng-clickable 的指令？

Angular directive for making elements ng-clickable?

javascript

angularjs

angularjs-directive