javascript - 使元素可点击的 Angular Directive(指令)？

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 plunk 并使用 element.bind('click')有魅力吗: http://plnkr.co/edit/CkgCL1IM095PDSdd3zTS?p=preview

Answer 1

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

应该是

angular.module('myApp', [])

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

或

angular.module('myApp', [])

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

这是您的 plunker 链接的一个分支，其中包含我的编辑以使其正常工作。

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