AngularJS - ng-click in directive's link function

In AngularJS, you can't really append directives to your custom directive without having to do some weird $compile logic to get the ngClick directives to register. Probably something like:

// include $compile
// ... append li elements
scope.$apply(function() {
  $compile(elem)(scope);
});

I have no idea if that works by the way, so don't hold me accountable if it doesn't. Generally, the way you solve this problem is with a directive that looks like this:

angular.directive('pager', function() {
  return {
    restrict: 'AEC',
    scope: {
      numPages: '=pager',
      pageFn: '='
    },
    template: '<ul><li ng-repeat="page in pages" ng-click="executePage(page)">{{page}}</li></ul>',
    link:  function(scope, elem, attrs) {
      scope.pages = [];
      scope.$watch('numPages', function(pages) {
        if(!pages) return;
        scope.pages = [];
        for(var i = 1; i <= pages: i++) {
          scope.pages.push(i);
        }
      });
      scope.executePage = function(page) {
        if(scope.pageFn){
          // Additional Logic
          scope.pageFn(page);
        }
      };
    }
  };
})

Then in your html you would write the directive like this:

<my-directive>
  <div pager="numberOfPages" page-fn="goToPage"></div>
</my-directive>

goToPage is a function that is defined in the myDirective directive and accepts a page parameter. At this point, the paging directive is also abstract enough for you to use in multiple places and not really have to worry about external functionality.

This should do it:

    app.directive('foo', function($compile){
   restrict: 'A',
   link: function(scope, elem){
      ... // some logic

      for (var i = 1; i < numberOfPages + 1; i++) {
         elem.append('<li ng-click="bar('+i+')">'+i+'</li>');
    $compile(elem)(scope);
      }
   }
});

What I've ended up doing is replacing ng-repeat in the directive's template with bindonce, which minimizes the footprint.

https://github.com/Pasvaz/bindonce