Angular 未绑定 ng-click

Question

我正在 angular 中为我的应用构建一个导出功能。我需要有可点击的按钮来调用范围内的导出功能。我尝试使用 ng-click="myFunction()"，但未调用导出...

这是我的玉石模板

    ul.dropdown-menu(role='menu' aria-labelledby='dLabel')
      li
        a(export-content-as, export-type='markdown',
        export-content='properties.quill.getHTML',
        href='', ng-click="exportAs()") Export as markdown
      li
        a(export-content-as, export-type='raw',
        export-content='properties.quill.getText',
        href='', ng-click="exportAs()") Export as text
      li
        a(export-content-as, export-type='pdf',
        export-content='properties.quill.getContents',
        href='', ng-click="exportAs()") Export as PDF

和我的 js 文件：

angular.module('foo', [])
…
.directive('exportContentAs', ['properties', '$window', 'exportRawText', 'exportMarkdown', 'exportPdf',
  function(properties, $window, exportRawText, exportMarkdown, exportPdf) {
    function link(scope, element) {
      scope.exportAs = function() {
        switch (scope.type) {
          case 'markdown':
            exportMarkdown(scope.exportContent());
            break;
          case 'raw':
            exportRawText(scope.exportContent());
            break;
          case 'pdf':
            exportPdf(scope.exportContent());
            break;
          default:
            break;
        }
      };
    } 

    return {
      scope: {
        exportType: '@',
        exportContent: '&'
      },
      link: link,
      restrict: 'A'
    };
  }
]);

我知道模块已加载（我在代码的另一部分调用了另一个指令）。我还知道，当我单击任何 link 时，scope.exportAs 函数 未被调用 。

我还可以通过使用 element.on('click', exportAs) 设法将点击绑定到 exportAs 的调用，但我想了解为什么我需要这样做（不仅在 ng-click="exportAs").

Answer 1

您可以使用为指令绑定点击事件的正常方式。如果你坚持使用带有属性指令的锚标记的 ng-click，你可以尝试这样的事情：

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

app.controller('MainCtrl', function($scope) {
  $scope.type = "raw";
  $scope.exportAs = function(exportType) {
        switch (exportType) {
          case 'markdown':
            alert('markdown');
            break;
          case 'raw':
            alert('raw');
            break;
          case 'pdf':
            alert('pdf');
            break;
          default:
            alert(exportType);
            break;
        }
      };
});


app.directive('exportContentAs', 
  function() {
    return {
      scope: {
        exportType: '=',
        eventHandler: '&ngClick'
      },
      restrict: 'A'
    };
  }
);

用法：

  <body ng-controller="MainCtrl">
    <a export-content-as export-type='type'
        href ng-click="exportAs(type)"> TEST</a>
  </body>

Answer 2

发生这种情况是因为 Angular 寻求 exportAs 函数不是在指令的隔离范围内，而是在控制器范围（父范围）中。还有一种做法：

从您的指令中删除隔离范围
将类型和文件名直接传递给exportAs

这里是 pluker 来证明这一点： http://plnkr.co/edit/AKIRZ2DZIJOHLsC0b95O

希望这能帮助您理解。

Angular 未绑定 ng-click

Angular not binding ng-click

javascript

angularjs

directive