ng-click not triggering a controller function on a table td click which is rendered later after the controller is initialized

Question

I want to trigger a function in a controller (initialized on page load) called on ng-click present on a td element of table which is loaded after selecting some option from the select box in the HTML page.

Using ui-router, i am loading an HTML page with its controller on click of a menu item. This HTML contains a form with a combo box (select tag) with some options in it. Also i have a div which is container for a table and the div is empty to on page load. When some option is selected from the combo box, i have a custom directive which executes the change event and inside the container div, a table is created using pure JavaScript and loaded with data received from an Ajax call. The TDs in this table have a ng-click present on them which should trigger a function present in the controller which is not happening. I am new to AngularJS and hence any help received will be appreciated.

I have tried using $digest, $apply on the $scope variable (inside JavaScript's setTimeout function) inside the custom directive after the table is rendered. But the changes didn't apply.

HTML code




    
        
            Please select an option to fetch list.
        
        
            Select Option : 
            Select Item

AngularJS Code


var tableApp = angular.module("myApp", ['ui.router','uiRouterStyles','flow']);
tableApp.controller("ListCtrl", function($scope){

    $scope.loadSelectList = function(){
        $scope.listItems = manager.getListItems();
    };

    $scope.getItemInfo = function(event){
        alert("Need a pop up!!!");
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
    };
});

tableApp.directive("getList", function(){
    return {
        restrict: "A",
        link: function ($scope,elm) {
            elm.on('change', function (ev){
               if(ev.currentTarget.value == ""){
                   $("#tableContainer").css("display","none").empty();
                }
                else{
                    $("#tableContainer").empty();
                    manager.getTableData();
                    tableDataView.viewTable();
                }
               setTimeout(function() {
                   $scope.$digest();
               }, 1000);
               ev.stopPropagation();
            });
        }
    }
});

UI router

.state('change-table-data', {
            url: '/change/table/data',
            templateUrl: 'ChangeTable.html',
            controller: 'ListCtrl',
            data: {
                  css: ['stylesheet1.css','stylesheet2.css']
                }
        })

Expected output




    
        
            Please select an option to fetch list.
        
        
            Select Option : 
            Select Item
        
    
    



Serial Number
Item ID
Item Name



1
I101
ABC


2
I102
XYZ

As shown above in the Expected output section, a table is rendered and each td has ng-click function over it. On click of this td, i need the getItemInfo() present in the controller to trigger which is not happening.

Swanand Phadke · Accepted Answer

I found the answer. I needed to pass $compile service to

getList directive

and inside the directive instead of

setTimeout(function() {
                   $scope.$digest();
               }, 1000);

function, it should have been

setTimeout(function() {
                       $compile($("#tableContainer"))($scope);
                   }, 1000);

I am now able to trigger the controller function

getItemInfo

ng-click not triggering a controller function on a table td click which is rendered later after the controller is initialized

Answers (1)

Related Questions