Question

我正在以角度为我的应用程序构建导出功能。我需要有可点击的按钮来调用范围中的导出功能。我尝试使用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'
    };
  }
]);

我知道模块已加载（我在我的代码的另一部分调用另一个指令）。我也知道当我点击任何一个链接时，函数scope.exportAs被而不是调用。

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

Answer 1

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

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

这是一个证明这一点的插件： http://plnkr.co/edit/AKIRZ2DZIJOHLsC0b95O

希望这有助于您理解。

Answer 2

你可以采用正常的方式绑定click事件for directive。如果你坚持使用带有属性指令的锚标记的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>

角度不绑定ng-click

2 个答案: