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的回答，我更新了我的插件并使用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!' }
})

这里是你的编辑链接的一个分支，带有我的编辑功能。

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

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

1 个答案: