0

I have a jQuery jTable, which is being initalized with angularjs $document.ready function. Here the column with ng-click event in it:

            $document.ready(function () {
                jQuery('#tblArticlesSearch').jtable({              
                  paging: true
                 fields:{
                       ToCart: {
                          width: '1%',
                        display: function () {
                          return '<i class="fa fa-shopping-cart" 
                           aria-hidden="true" ng-click="AddToDeliveryList();"></i>';
                        }
                      }
                  }
               }
                });
              });

In controller, here is the function:

angular.module("deliveryListModule")
.controller("deliveryListController", ["$scope", "$http", "$document", function ($scope, $http, $document) {


  $scope.AddToDeliveryList = function () {
    alert("add");
  }

And of course, controller and module are applied on document:

<div id="divMain" class="divMain" ng-app="deliveryListModule"
        ng-controller="deliveryListController">

Problem is, that ng-click event is not firing when I click on the item. Nothing happens. Why is that?

EDIT:

With thanks to Tushar, I've used this line of code and it works fine now:

return $compile('<i class="fa fa-shopping-cart" aria-hidden="true" ng-click="AddToDeliveryList();"></i>')($scope);

Of course, I've also injected $compile.

Community
  • 1
  • 1
FrenkyB
  • 6,625
  • 14
  • 67
  • 114
  • [ng-click not working from dynamically generated HTML](http://stackoverflow.com/q/19267979/2025923), [ng-click not working in dynamically created content](http://stackoverflow.com/q/30468856/2025923), [Dynamically created element not firing click event](http://stackoverflow.com/q/32649180/2025923) – Tushar Nov 10 '16 at 05:02
  • http://stackoverflow.com/questions/30468856/ng-click-not-working-in-dynamically-created-content – Sudharsan S Nov 10 '16 at 05:03
  • There's an extra closing bracket `}` in your `$document.ready(function ()` – Monasha Nov 10 '16 at 05:03
  • @Tushar - thanks for you answer. I just don't understand one thing: what is HTML where I should append compiled element? Should I bind whole table with $scope or just one cell and where to append this? – FrenkyB Nov 10 '16 at 05:33
  • Just use `return $compile('')($scope);` and inject `$compile` – Tushar Nov 10 '16 at 05:39
  • @Tushar thanks a lot, it works. Can you please paste this as answer? – FrenkyB Nov 10 '16 at 06:31
  • You're welcome. :) As the question is already answered and is dupe, nobody can answer a closed question. You can go and upvote the answers on the linked question. – Tushar Nov 10 '16 at 07:26

0 Answers0