Angular not binding ng-click

Question

I am building an export function for my app in angular. I need to have clickable buttons that would call an export function in the scope. I tried to use ng-click="myFunction()", but the export is not called …

Here is my jade template

    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

and my js file :

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'
    };
  }
]);

I know that the module is loaded (I'm calling another directive in another part of my code). I also know that when I click any of the link, the function scope.exportAs is not called.

I can also manage to bind the click to the call of exportAs by using element.on('click', exportAs), but I would like to understand why I need to do that (on not only ng-click="exportAs").

Alex Paramonov · Accepted Answer · 2015-06-03 21:28:13Z

1

That is happening because Angular seeks exportAs function not in the isolate scope of your directive, but in the controller scope (parent scope). There is another approach:

remove the isolate scope from your directive
pass the type and the file name directly to exportAs

Here is the pluker to demonstrate this: http://plnkr.co/edit/AKIRZ2DZIJOHLsC0b95O

Hope this will help you to understand.

answered Jun 3, 2015 at 21:28

Alex Paramonov

2,7602 gold badges25 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ngunha02 · Accepted Answer · 2015-06-03 20:57:47Z

you could just go with the normal way of binding click event for directive. If you insist on using ng-click with anchor tag with attribute directive, you could try something like this:

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'
    };
  }
);

Usage:

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

Collectives™ on Stack Overflow

Angular not binding ng-click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related