CODEWITHSUNDEEP
jqueryangularjsdatatables
user4279166
user4279166

Reputation:

Angular function not triggered by html rendered by datatable?

{
                        sTitle: "ANSWER_CORRECT",
                        mData:"ANSWER_CORRECT",
                        sClass: "readonly",
                        mRender: function(data, type, obj) {                             
                            return_string="<button type='button' ng-click='updateCA()'>Confirm</button>";
                            return return_string;
                        }

 },

myc.controller('AdminController',['$scope','$route',function($scope,$route){
      $scope.updateCA=function(){
               console.log("pop");
       }   

            $(document).ready(function() { 
                ini_table(); //everything above is in this function.

            });
    }

I am using datatable to render buttons which can supposedly trigger the function updateCA. Unfortunately, nothing happens when I click the buttons. No error or warning messages. I think it could be caused by different scoping between using JQuery and Angular. So, I've tried using $scope.$apply(function(){ init_table() }); No luck.

Upvotes: 1

Views: 511

Answers (1)

William Ballesteros
William Ballesteros

Reputation: 1011

Try this

return_string="<button type='button' onClick='updateCA(); return false;'>Confirm</button>";

External function

function updateCA() {
    var scope = undefined;
    //Controller in body element 
    //<body ng-controller="yourController" id="body"> id is important
    scope = angular.element(document.getElementById("body")).scope();
    scope.$apply(function () {
        scope.updateCA();
    });
}

Angular Controller 

$scope.updateCA = function() {
        //logic here
    };

Upvotes: 1

Related Questions